CODEWITHSUNDEEP
javascriptjqueryscroll
rablentain
rablentain

Reputation: 6745

Scrolling jQuery

I have some code that is supposed to scroll one page height every time scroll is triggered in some way. I want this to scroll only one heigh, and "pause" the trigger until the scrolling is done. However, my script does not stop, instead it will scroll all the way down instantly. Scrolling upwards seems to work better...

Here is my script:

var lastScroll = 0;
var scrollPos = 0;
var blockScroll = 0;

$(window).scroll(function() {
    var scroll = $(this).scrollTop();
    if(blockScroll == 0) {
        blockScroll = 1;
        if(scroll > lastScroll){
            // Down
            scrollPos++;
            console.log(scrollPos+"-"+blockScroll);
            $("html, body").animate({scrollTop:$(window).height()*scrollPos}, 'slow', function() {
                blockScroll = 0;
            });
        } else {
            // Up
            scrollPos--;
            console.log(scrollPos);
            $("html, body").animate({scrollTop:$(window).height()*scrollPos}, 'slow', function() {
                blockScroll = 0;
            });
        }
    }
    lastScroll = scroll;
});

blockScroll is meant to be set when a scroll event appears, and to be unset when the scrolling animation stops. As a lock. I am not shure this works the way I want it though... Can someone see something obviously wrong with this? Am I having trouble with the fact that jQuery is async?

Upvotes: 2

Views: 88

Answers (1)

Jivings
Jivings

Reputation: 23262

It appears that animate is firing scroll events itself, so when it finishes, it's firing one last scroll event which restarts the process.

It seems like adding a small timeout in the callback solves the problem:

setTimeout(function () {blockScroll = 0;}, 50)

http://jsfiddle.net/qch787yq/1/

Upvotes: 1

Related Questions