CODEWITHSUNDEEP
javascripthtml
Tomasz Kleszczewski
Tomasz Kleszczewski

Reputation: 56

How to detect "scrollstop" event in a browser

I know that there is no scrollstop event in an official browser DOM documentation but how to detect it?

Upvotes: 0

Views: 87

Answers (1)

BOZ
BOZ

Reputation: 2020

The most logical way to do this is to listen for a timeout.

var timer = null;
var timeout = 150; //ms
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
          // do something
    }, timeout);
}, false);

If it is still not scroll after 150ms it means the scroll has stopped!

You can change this timeout as you see fit. Again, I think the most logical thing is to choose a value between 150 and 250ms.

var timer = null;
var timeout = 150; //ms
window.addEventListener('scroll', function() {
  if (timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('Scroll Stopped');
  }, timeout);
}, false);
html,
body {
  padding-top: 100rem;
}

Upvotes: 2

Related Questions