Scrolling jQuery

Scrolling jQuery

本文关键字：jQuery Scrolling      更新时间：2023-09-26

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

这是我的脚本：

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是异步的，我是不是遇到了麻烦？

似乎animate本身正在启动滚动事件，因此当它完成时，它将启动最后一个滚动事件，从而重新启动进程。

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

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

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

相关文章：