CODEWITHSUNDEEP
javascriptdom-events
Jake
Jake

Reputation: 254

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

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?

Upvotes: 0

Views: 290

Answers (1)

Javad Ebrahimi
Javad Ebrahimi

Reputation: 209

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);

Upvotes: 3

Related Questions