I have a navigation bar where I am using the scrollIntoView method to ensure that the active element is always centered in the list. However, I encountered an issue wherein scrolling the main content interrupts or stops the scroll action triggered by scrollIntoView. This behavior only occurs when the user is actively scrolling. You can view an example of this scenario here: https://jsfiddle.net/2otv6pyx/
(The code remains the same as provided below. The issue can be observed more clearly on stackoverflow due to page scrolling)
const first = document.querySelector('#first')
const last = document.querySelector('#last')
let atLast = false
setInterval(() => {
if (!atLast) {
last.scrollIntoView({
block: "end",
behavior: "smooth"
})
atLast = true
} else {
first.scrollIntoView({
block: "end",
behavior: "smooth"
})
atLast = false
}
}, 1000)nav {
position: sticky;
top: 0;
background-color: white;
}
nav>ul {
list-style-type: none;
display: grid;
grid-auto-flow: column;
overflow-x: scroll;
}
nav .active {
color: red
}
nav li {
padding-right: 1rem;
}
...
<main>
...
</main>I am looking for a solution that would allow the main content to be scrolled without interfering with the navbar animation. Is there a way to enforce the scrollIntoView function despite user scrolling?
Additionally, I have observed that when I scroll the entire content downward, it initially scrolls upward and then horizontally.