How can I prevent stopping scrollIntoView when the user starts to scroll by his own?


I have an navbar where I use scrollIntoView to always have the active element in the center of the list. However I discovered when the user scrolls the main content it will interrupt / stop the scrollIntoView. It only works when there is no scrolling from the user. You can in this example: https://jsfiddle.net/2otv6pyx/
(Code is the same as below. However the example bugs a little bit on stackoverflow since it’s scrolling the page)

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

p {
  line-height: 8rem;
}
<nav>
  <ul>
    <li id="first">Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li>Sulier</li>
    <li>Nice</li>
    <li>useScroll</li>
    <li>Is</li>
    <li id="last">Sulier</li>
  </ul>
</nav>

<main>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
</main>

I want to be able to scroll the main content without stopping the animation in the navbar. How can I achieve this? Is there a way to force scrollIntoView?

I also noticed when I scroll the whole content down it will first scroll up and than horizontal.

Source: CSS – Stack Overflow

November 28, 2021
Category : News
Tags: css | DOM | html | javascript | scroll

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.