javascripthtmlautoscroll

How can I make autoscroll to only activate when the user is not interacting with my page?


From what I understand this script calculate the initial position and advances one pixel at a time but in a 10ms rate so it seems like a smooth scrolling.

I like that, but I want it to call the scrolling only when the user is not interacting, in other words, I want it to stop scrolling as soon as the user interacts with the page. How can I accomplish such thing?

var currentpos = 0,
  alt = 1,
  curpos1 = 0,
  curpos2 = -1

function initialize() {
  startit()
}

function scrollwindow() {
  if (document.all)
    temp = document.body.scrollTop
  else
    temp = window.pageYOffset
  if (alt == 0)
    alt = 1
  else
    alt = 0
  if (alt == 0)
    curpos1 = temp
  else
    curpos2 = temp
  if (curpos1 != curpos2) {
    if (document.all)
      currentpos = document.body.scrollTop + 1
    else
      currentpos = window.pageYOffset + 1
    window.scroll(0, currentpos)
  } else {
    currentpos = 0
    window.scroll(0, currentpos)
  }
}

function startit() {
  setInterval("scrollwindow()", 10)
}
window.onload = initialize;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat interdum varius sit amet mattis vulputate enim nulla. A erat nam at lectus urna duis convallis. Eget nunc lobortis mattis
aliquam faucibus purus. Sollicitudin ac orci phasellus egestas tellus rutrum. Tristique magna sit amet purus gravida quis blandit. Morbi non arcu risus quis varius. Dictumst vestibulum rhoncus est pellentesque elit. Euismod nisi porta lorem mollis aliquam
ut porttitor. Curabitur gravida arcu ac tortor dignissim convallis aenean. Quis blandit turpis cursus in hac habitasse platea dictumst. Nibh praesent tristique magna sit amet. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Arcu cursus
vitae congue mauris rhoncus aenean vel elit. Ac turpis egestas integer eget aliquet nibh. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Varius morbi enim nunc faucibus a pellentesque. Eu consequat ac felis donec et odio pellentesque.
Aliquet risus feugiat in ante metus dictum at tempor commodo. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Tristique risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sed felis eget velit
aliquet sagittis id consectetur. Viverra suspendisse potenti nullam ac tortor. Ultrices dui sapien eget mi. Ornare suspendisse sed nisi lacus sed viverra. Faucibus vitae aliquet nec ullamcorper sit. Sodales ut etiam sit amet nisl purus. Dictum non consectetur
a erat nam at lectus. Ipsum faucibus vitae aliquet nec. Id leo in vitae turpis massa sed. Felis eget nunc lobortis mattis aliquam. Vitae tempus quam pellentesque nec nam aliquam. Eget magna fermentum iaculis eu non diam. Adipiscing elit duis tristique
sollicitudin nibh sit. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Euismod lacinia at quis risus sed vulputate odio ut. Bibendum neque egestas
congue quisque. Cras ornare arcu dui vivamus. Eget aliquet nibh praesent tristique. Lectus magna fringilla urna porttitor. Venenatis tellus in metus vulputate eu. Elit sed vulputate mi sit amet mauris commodo. Sapien nec sagittis aliquam malesuada bibendum
arcu vitae. Elementum pulvinar etiam non quam lacus suspendisse. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Dictum non consectetur a erat nam at lectus urna. Bibendum ut tristique et egestas quis ipsum. Vitae semper
quis lectus nulla at volutpat diam ut. Viverra accumsan in nisl nisi.


Solution

  • If you need to detect any user interaction, then all you need to do is add event listeners for the mousemove, keydown, click, and touchstart. In that event listener, all you need to do is call clearInterval() and pass the value returned from the setInterval() call. Like this:

    let currentpos = 0,
      alt = 1,
      curpos1 = 0,
      curpos2 = -1;
    
    function scrollwindow() {
      if (document.all)
        temp = document.body.scrollTop
      else
        temp = window.pageYOffset
      if (alt == 0)
        alt = 1
      else
        alt = 0
      if (alt == 0)
        curpos1 = temp
      else
        curpos2 = temp
      if (curpos1 != curpos2) {
        if (document.all)
          currentpos = document.body.scrollTop + 1
        else
          currentpos = window.pageYOffset + 1
        window.scroll(0, currentpos)
      } else {
        currentpos = 0
        window.scroll(0, currentpos)
      }
    }
    
    function startit() {
      let interval = setInterval("scrollwindow()", 10);
      
      const stop = () => clearInterval(interval);
      window.addEventListener('mousemove', stop);
      window.addEventListener('keydown', stop);
      window.addEventListener('click', stop);
      window.addEventListener('touchstart', stop);
    }
    window.onload = startit;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat interdum varius sit amet mattis vulputate enim nulla. A erat nam at lectus urna duis convallis. Eget nunc lobortis mattis
    aliquam faucibus purus. Sollicitudin ac orci phasellus egestas tellus rutrum. Tristique magna sit amet purus gravida quis blandit. Morbi non arcu risus quis varius. Dictumst vestibulum rhoncus est pellentesque elit. Euismod nisi porta lorem mollis aliquam
    ut porttitor. Curabitur gravida arcu ac tortor dignissim convallis aenean. Quis blandit turpis cursus in hac habitasse platea dictumst. Nibh praesent tristique magna sit amet. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Arcu cursus
    vitae congue mauris rhoncus aenean vel elit. Ac turpis egestas integer eget aliquet nibh. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Varius morbi enim nunc faucibus a pellentesque. Eu consequat ac felis donec et odio pellentesque.
    Aliquet risus feugiat in ante metus dictum at tempor commodo. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Tristique risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sed felis eget velit
    aliquet sagittis id consectetur. Viverra suspendisse potenti nullam ac tortor. Ultrices dui sapien eget mi. Ornare suspendisse sed nisi lacus sed viverra. Faucibus vitae aliquet nec ullamcorper sit. Sodales ut etiam sit amet nisl purus. Dictum non consectetur
    a erat nam at lectus. Ipsum faucibus vitae aliquet nec. Id leo in vitae turpis massa sed. Felis eget nunc lobortis mattis aliquam. Vitae tempus quam pellentesque nec nam aliquam. Eget magna fermentum iaculis eu non diam. Adipiscing elit duis tristique
    sollicitudin nibh sit. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Euismod lacinia at quis risus sed vulputate odio ut. Bibendum neque egestas
    congue quisque. Cras ornare arcu dui vivamus. Eget aliquet nibh praesent tristique. Lectus magna fringilla urna porttitor. Venenatis tellus in metus vulputate eu. Elit sed vulputate mi sit amet mauris commodo. Sapien nec sagittis aliquam malesuada bibendum
    arcu vitae. Elementum pulvinar etiam non quam lacus suspendisse. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Dictum non consectetur a erat nam at lectus urna. Bibendum ut tristique et egestas quis ipsum. Vitae semper
    quis lectus nulla at volutpat diam ut. Viverra accumsan in nisl nisi.