EN
JavaScript - wheel stop event
7 points
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:
xxxxxxxxxx1
2
<html>3
<body style="height: 200px;">4
<div style="background: silver; height: 600px;">5
Scroll me up, down, up down and stop!6
</div>7
<script>8
9
function createWheelStopListener(element, callback, timeout) {10
var handle = null;11
var onScroll = function() {12
if (handle) {13
clearTimeout(handle);14
}15
handle = setTimeout(callback, timeout || 200); // default 200 ms16
};17
element.addEventListener('wheel', onScroll);18
return function() {19
element.removeEventListener('wheel', onScroll);20
};21
}22
23
// Example usage:24
25
createWheelStopListener(window, function() {26
console.log('onwheelstop');27
});28
29
</script>30
</body>31
</html>
