Prevent function from running while user is scrolling

Question

How can I do something like this?

myfunction () {

    if (notscrolling) {

        // do stuff

    }
}

This is the best solution that I could find:

It gets the current scroll position, then gets it again 5 milliseconds later. If the numbers are the same, then the page is not scrolling! No global variable required.

myfunction () {

    var a = $(document).scrollTop();

    setTimeout(function() { 
        var b = $(document).scrollTop();

            if (a === b) {

                // do stuff here cuz its not scrolling :) !!!!

            }
    }, 5);

}

on the window scroll event, set a global scrolling variable to true or false, then have a setTimeout within the scroll event that sets it back to default after x miliseconds. You can then use the value of that global variable to determine if the window is scrolling. — Kevin B, Dec 13 '12 at 20:18

score 1 · Answer 1 · answered Dec 13 '12 at 20:18

1

check out http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ for scrollstart and scrollstop events.

Use those events to set a global variable scrolling and check that in myfunction

answered Dec 13 '12 at 20:18

DiverseAndRemote.com

19,314
10
61
70

score 1 · Answer 2 · edited May 23 '17 at 11:55

1

I think this other post matches your requirements quite well: How to trigger ajax request on scroll stop?

What you want to achieve is something among the lines of "scrollStop".

edited May 23 '17 at 11:55

Community

1
1

answered Dec 13 '12 at 20:19

Peter Rasmussen

16,474
7
46
63

Kevin B · Answer 3 · 2012-12-14T04:59:14.760

on the window scroll event, set a global scrolling variable to true or false, then have a setTimeout within the scroll event that sets it back to default after x miliseconds. You can then use the value of that global variable to determine if the window is scrolling.

window.scrolling = false;
var timer;

$(window).on('scroll',function(){
    window.scrolling = true;
    clearTimeout(timer);
    timer = setTimeout(function(){
        window.scrolling = false;
        $(window).trigger("scrollend");
    },100);
});

function myfunction() {
    if (!window.scrolling) {
        alert("Window is not scrolling.");
    }
}

or even better, don't use the global scope.

(function(){
    var timer, scrolling = false;

    $(window).on('scroll',function(){
        scrolling = true;
        clearTimeout(timer);
        timer = setTimeout(function(){
            scrolling = false;
            $(window).trigger("scrollend");
        },100);
    });

    function myfunction() {
        if (!scrolling) {
            alert("Window is not scrolling.");
        }
    }
})();

Its a bit intensive to spawn a setTimeout for every scroll tick. This will spawn hundreds of them. Instead, keep a var that points to the setTimeout and use clearTimeout each time the scroll happens so you will only have one setTimeout at a time. — King Friday, Dec 13 '12 at 21:55
@kitgui.com Definitely, I'm not sure how I left that out. It would also be buggy with race conditions if you don't clear it. — Kevin B, Dec 13 '12 at 21:58
It might be cleaner also if you promoted an event handler to this that would allow callback such as scrollEnd(callback). — King Friday, Dec 14 '12 at 04:21

Prevent function from running while user is scrolling

3 Answers3