滚动 jQuery

Question

我有一些代码应该在每次以某种方式触发滚动时滚动一个页面高度。我希望它只滚动一个高度，并且 "pause" 触发器直到滚动完成。但是，我的脚本不会停止，而是会立即向下滚动。向上滚动似乎效果更好...

这是我的脚本：

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 在滚动事件出现时设置，在滚动动画停止时取消设置。作为一把锁。我不确定这是否按照我想要的方式工作......有人能看出这有什么明显的问题吗？ jQuery 是异步的，我有问题吗？

Answer 1

看来 animate 本身正在触发滚动事件，因此当它完成时，它会触发最后一个滚动事件，从而重新启动进程。

似乎在回调中添加一个小超时解决了问题：

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

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

滚动 jQuery

Scrolling jQuery

javascript

jquery

scroll