滚动事件后无限循环答案

【问题标题】：Infinite loop after scroll event滚动事件后无限循环
【发布时间】：2014-12-04 02:04:36
【问题描述】：

我试图让一个 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;
});

我的代码有什么问题？

【问题讨论】：

你在哪里初始化currentTop..????
在 animate() 内，您再次滚动。它会触发滚动事件......
啊它在函数之前。让我编辑
啊，是的，你是对的@PranavCBalan。关于停止它的任何建议？
顺便提一下：如果你使用return falsee.preventDefault();和e.stopPropagation();就不需要了

标签： jquery loops scroll infinite

【解决方案1】：

您可以使用这个技巧：定义一个布尔变量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;
});

【讨论】：

但是有一个问题：如果您使用鼠标滚轮，它还会在mousewheel 事件结束时触发滚动事件（至少在 chrome 上）...我正在寻找一个干净的解决方法
但在mousewheel 事件结束时，scrolling 已经设置为true。所以scroll 事件将被忽略。
动画回调函数中的小超时会起作用，但它很难看。
两种解决方案（带有标志和绑定-解除绑定）都需要setTimeout。让我们说这个丑陋的解决方法有效。至少in fiddle.
嗯，在我的编辑中，我发现了一个不使用超时的简单解决方法......但这仍然是一个痛苦......好吧，无论如何！在这上面花了太多时间^^

【解决方案2】：

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

类似

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

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

希望这是您正在寻找的。p>

【讨论】：