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

你可以使用这个技巧：定义一个布尔变量scrolling，你在做动画时设置为true，测试它，并在动画结束时将其设置为假：

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;
});

Answer 2

取消绑定滚动事件，直到第一个滚动完成其动作，并在滚动完成后再次绑定滚动事件 - 在您的情况下动画完成。

像

这样的东西

function scrollHandler() {
    if ($(window).scrollTop() > $(document).height() - ($(window).height() +300)) {

            $(window).unbind('scroll');
            $('.loading').show();
            .............
            .............
            .............
            $(window).bind('scroll', function () { scrollHandler(); });
    }
}

希望这就是你要找的东西。

滚动事件后的无限循环

2 个答案: