由于位置：绝对，触发滚动事件时按钮元素不会粘在浏览器的左侧和右侧。有什么解决办法吗？

Question

我正在尝试通过按钮实现垂直轴上的滚动事件。当用户单击按钮时，容器应该简单地用按钮垂直滚动到内容的末尾。但是，它们不会粘在网络浏览器的边缘。我怎样才能解决这个问题？我找不到任何解决方法。

问题：

完整代码如下：

HTML：

<nav class="tabs-navigation">
    <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>
    <ul>
        <li>
        <!-- button elements -->
        </li>
    </ul>
</nav>

CSS：

.tabs-navigation {
    display: flex;
    align-content: center;
    justify-content: center;
    overflow-x: scroll;
    color: #ece5e0;
    background-color: #282828;
    -ms-overflow-style: none;
    position: relative;
}

.tn-btn {
    position: absolute;
    z-index: 1;
    outline: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 0 1em;
}

.tn-prev {
    left: 0;
    top: calc(100% / 3);
}

.tn-next {
    right: 0;
    top: calc(100% / 3);
}

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

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

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;
})

Answer 1

我认为你在容器内有按钮并且移动整个容器的问题，最好直接在列表上有滚动效果，其中按钮仍然在其位置