How to fire an event only if specific-time has lapsed after scrolling has been stopped

Question

I want to fire an event-handler after and only if the scrolling has been stopped for specific time (lets say 0.2sec).

I have some positioning CSS styles associated with off-canvas side menu (in mobile version) which is continuously and automatically assigned a new value corresponding to the scrolling, every time the user scroll.

I want to fire this event-handler (of assigning a new value) only if 0.2sec has lapsed after the user starts and stops scrolling.
If I associate this event with scroll-event then it wont wait for the condition to check if 0.2sec has lapsed. it will just keep on firing event handler while the user scrolls.

So how can I make this happen?

https://stackoverflow.com/a/4298672/1169519 – Teemu May 13 '19 at 12:27 — Teemu, May 13 '19 at 12:27

score 3 · Answer 1 · answered May 13 '19 at 12:29

you can use this:

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

    // Clear our timeout throughout the scroll
    window.clearTimeout( isScrolling );

    // Set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {

        // Run the callback
        console.log( 'Scrolling has stopped.' );

    }, 200); // 200 for 0.2s 

}, false);

How to fire an event only if specific-time has lapsed after scrolling has been stopped

1 Answers1