Languages
[Edit]
EN

JavaScript - scroll stop event

9 points
Created by:
AnnLen
13450

In this short article we would like to show how to detect scroll stop event (scroll end event).

There is no way to handle scroll stop event by default API listener (we have 2020-09-16). Solution for the problem is to use some trick: do some logic when scroll event doesn't occur few milliseconds after appeared.

Example code:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body style="height: 200px;">
  <div style="background: silver; height: 600px;">
    Scroll me up, down, up down and stop!
  </div>
  <script>
    
    function createScrollStopListener(element, callback, timeout) {
        var handle = null;
        var onScroll = function() {
            if (handle) {
                clearTimeout(handle);
            }
            handle = setTimeout(callback, timeout || 200); // default 200 ms
        };
        element.addEventListener('scroll', onScroll);
        return function() {
            element.removeEventListener('scroll', onScroll);
        };
    }

    // Example usage:

    createScrollStopListener(window, function() {
        console.log('onscrollstop');
    });

  </script>
</body>
</html>

 

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join