Languages
[Edit]
EN

JavaScript - wheel stop event

7 points
Created by:
Root-ssh
77070

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

There is no way to handle wheel stop event by default API listener (we have 2020-09-16). Solution for the problem is to use some trick: do some logic when wheel 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 createWheelStopListener(element, callback, timeout) {
        var handle = null;
        var onScroll = function() {
            if (handle) {
                clearTimeout(handle);
            }
            handle = setTimeout(callback, timeout || 200); // default 200 ms
        };
        element.addEventListener('wheel', onScroll);
        return function() {
            element.removeEventListener('wheel', onScroll);
        };
    }

    // Example usage:

    createWheelStopListener(window, function() {
        console.log('onwheelstop');
    });

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

 

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join