滚动触发时按钮因position:absolute无法贴合浏览器边缘的解决办法

问题原因 #

按钮是绝对定位在.tabs-navigation容器上，但该容器未完全撑满浏览器宽度，且滚动时按钮会随容器位置偏移，导致无法固定在浏览器边缘。

解决方案 #

通过调整HTML结构和CSS定位规则，将按钮固定在浏览器视口边缘，同时保留导航容器的滚动功能：

1. 修改HTML结构

新增外层容器包裹导航和按钮，让按钮基于撑满浏览器宽度的外层容器定位：

<div class="tabs-container">
    <nav class="tabs-navigation">
        <ul>
            <li>
                <!-- button elements -->
            </li>
        </ul>
    </nav>
    <button id="tnPrevBtn" class="tn-btn tn-prev"><i class="bi bi-arrow-left-circle-fill"></i></button>
    <button id="tnNextBtn" class="tn-btn tn-next"><i class="bi bi-arrow-right-circle-fill"></i></button>
</div>

2. 更新CSS样式

调整容器布局和按钮定位逻辑：

.tabs-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tabs-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: scroll;
    color: #ece5e0;
    background-color: #282828;
    -ms-overflow-style: none;
    width: 100%;
}

.tn-btn {
    position: absolute;
    z-index: 1;
    outline: 0;
    border: 0;
    background-color: rgba(40, 40, 40, 0.8);
    cursor: pointer;
    padding: 0 1em;
    top: 50%;
    transform: translateY(-50%);
}

.tn-prev {
    left: 0;
}

.tn-next {
    right: 0;
}

.tn-btn>i {
    color: #ece5e0;
    width: 48px;
    height: 48px;
    font-size: 2rem;
}

.tabs-navigation::-webkit-scrollbar {
    display: none;
}

3. 保留原有JavaScript逻辑

滚动功能无需修改，保持原代码即可：

let tabsNavigation = document.querySelector(".tabs-navigation");
let scrollLeftBtn = document.getElementById("tnPrevBtn");
let scrollRightBtn = document.getElementById("tnNextBtn");

scrollLeftBtn.addEventListener("click", function () {
    tabsNavigation.scrollLeft -= 1000;
})

scrollRightBtn.addEventListener("click", function () {
    tabsNavigation.scrollLeft += 1000;
})

关键修改说明 #

• 外层容器.tabs-container设置width:100%，确保按钮定位基准为浏览器宽度。
• 按钮移至导航容器外，避免随导航滚动偏移。
• 用top:50% + transform: translateY(-50%)实现按钮精准垂直居中，替代原有的calc(100%/3)。
• 导航的justify-content改为flex-start，避免内容居中导致滚动起始位置异常。

内容的提问来源于stack exchange，提问作者user17767670