[Edit]

JavaScript - scroll stop event

1 contributors

2 contributions

0 discussions

12 points

Created by:

Krzysiek

741

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

Some web browser introduced in 2023 scrollend event, so still there is needed some legacy solution.

Quick solution:

xxxxxxxxxx
 
element.addEventListener('scrollend', (event) => {
    // ...
});

Note: we can use element.onscrollend = (event) => { /* ... */ }; construction also.

Legacy solution

Edit

Legacy solution for the problem is to use some trick: do some logic when scroll event doesn't occur few milliseconds after appeared.

xxxxxxxxxx
 
<!doctype html>
<html>
<body style="height: 200px;">
  <div style="background: silver; height: 600px;">
    Scroll me up, down, up down and stop!
  </div>
  <script>
​
    // Reusable function:
​
    function createScrollStopListener(element, callback, timeout) {
        if (timeout == null) {
            timeout = 200;  // default 200 ms
        }
        var removed = false;
        var handle = null;
        var handleScroll = function() {
            if (handle) {
                clearTimeout(handle);
            }
            handle = setTimeout(callback, timeout);
        };
        element.addEventListener('scroll', handleScroll);
        return function() {
            if (removed) {
                return;
            }
            element.removeEventListener('scroll', handleScroll);
            if (handle) {
                clearTimeout(handle);
            }
            removed = true;
        };
    }
​
    // Example usage:
​
    createScrollStopListener(window, function() {  // <div> elements based example is in the next section
        console.log('window: onscrollstop');
    });
​
  </script>
</body>
</html>

Auto running

Another example

Edit

In this section, you can find scroll stop event that is connected to div elements.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    body {
        height: 210px;
    }
    
    div.container {
        background: silver;
        height: 100px;
        overflow-y: scroll;
    }
    
    div.content {
        background: gold;
        height: 1000px;
    }
    
  </style>
  <script>
​
    // Reusable function:
​
    function createScrollStopListener(element, callback, timeout) {
        if (timeout == null) {
            timeout = 200;  // default 200 ms
        }
        var removed = false;
        var handle = null;
        var handleScroll = function() {
            if (handle) {
                clearTimeout(handle);
            }
            handle = setTimeout(callback, timeout);
        };
        element.addEventListener('scroll', handleScroll);
        return function() {
            if (removed) {
                return;
            }
            element.removeEventListener('scroll', handleScroll);
            if (handle) {
                clearTimeout(handle);
            }
            removed = true;
        };
    }
    
  </script>
</head>
<body>
  <div id="container-1" class="container">
    <div class="content">Scroll me up, down, up down and stop!</div>
  </div>
  <br />
  <div id="container-2" class="container">
    <div class="content">Scroll me up, down, up down and stop!</div>
  </div>
  <script>
​
    // Example usage:
​
    var container1 = document.querySelector('#container-1');
    var container2 = document.querySelector('#container-2');
    
    createScrollStopListener(container1, function() {
        console.log('container-1 element: onscrollstop');
    });
    
    createScrollStopListener(container2, function() {
        console.log('container-2 element: onscrollstop');
    });
​
  </script>
</body>
</html>