Button elements don't stick the left & right side of the browser when scroll event is triggered due to position: absolute. Any workarounds?

I’m trying to implement a scrolling event on vertical axis through buttons. When user clicks to buttons, the container should simply scroll to the end of the content vertically with buttons. But, they don’t stick to the edges of the web browser. How can I fix this? I couldn’t find any workarounds.

Problem:

Here’s the complete code:

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

>Solution :

i think the issue that you have the buttons inside the container and you move the whole container , it is better to have scrolling effect on the list directly , where the buttons still in their position