Question

I have put a scroll handler to my page :

$(window).scroll(function() {
  ...
});

and I’d like to do some operation when i stop to scroll the bar, not when I’am scrolling it.

How can I do it?

Answer 1

Timers are usually a gross hack but I can’t think of anything better in this case. Maybe something like this will work for you:

var DELAY = 250;  // Or whatever makes sense for you.
var timer = null;

function scrolling_has_stopped() {
    timer = null;  // Make sure everything is always in a sane state.

    // Do whatever you want to do when they've stopped scrolling.
    // ...
}

$(window).scroll(function() {
    if(timer)
        clearTimeout(timer);
    timer = setTimeout(scrolling_has_stopped, DELAY);
});

The basic strategy is to use a timer delay the “they’ve stopped scrolling” action until a few clock ticks after the last scroll event, the rest is just bookkeeping. You’ll want to play around with the DELAY value to get something that feels right.

Useful references:

• clearTimeout
• setTimeout