jquery - 滚动事件后无限循环

Question

我试图让 div 每次只滚动 70px，但是现在每次滚动我都会陷入无限循环。

我的函数中没有任何循环函数，但它以某种方式给了我无限循环:

var currentTop = 0;    
$('.contactDiv').on('scroll touchmove mousewheel', function(e){ 
    e.preventDefault();
    e.stopPropagation();

    currentTop = currentTop + 70;
    $('.contactDiv').animate({
        scrollTop: currentTop
    }, 500);

    return false;
});

我的代码有什么问题吗？

Answer 1

您可以使用这个技巧:定义一个 bool 变量scrolling，在执行动画时将其设置为 true，测试它，并在动画完成时将其设置回 false:

var currentTop = 0;    
var scrolling = false;

$('.contactDiv').on('scroll touchmove mousewheel', function(e){ 
    if (!scrolling) {
        e.preventDefault();
        e.stopPropagation();

        currentTop = currentTop + 70;

        scrolling = true;
        $('.contactDiv').animate({
            scrollTop: currentTop
        }, 500, function(){
            scrolling = false;
        });

        return false;
    }
});

编辑:
如果在动画结束后立即触发滚动事件，它确实会循环，直到到达 .contactDiv 的底部。但是，您可以使用额外的变量(此处称为 allowNextAnimation)来防止这种情况:

<强> jsFiddle demo

var currentTop = 0;    
var scrolling = false;
var allowNextAnimation = true;

$('.contactDiv').on('scroll touchmove mousewheel', function(e){
    if (!scrolling && allowNextAnimation) {
        currentTop = currentTop + 70;

        scrolling = true;
        $('.contactDiv').animate({
            scrollTop: currentTop
        }, 500, function(){
            scrolling = false;
            allowNextAnimation = false;
        });

        return false;
    }
    allowNextAnimation = true;
});