I'd like to stop certain things from happening while an element is being scrolled.
Scrolling may start when the mouse wheel / mouse pad is used, but it may also happen from a scrollIntoView() being called.
Is there a way to tell if an element is currently being scrolled directly from that element?
Here is a function that helps you to detect scrolling with debounce and you can start to invoke any function after a set timer.
let timeOut;
function debounce(delay) {
console.log("It's rolling!");
clearTimeout(timeOut);
timeOut= setTimeout(function(){
console.log("It's stopped!");
}, delay);
}
document.querySelector("#scrollable").addEventListener('scroll',(function() {
debounce(200);
}));div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}<div id="scrollable">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>