javascript - 向下或向上滚动处于无限循环状态

Question

我正在尝试做下一件事:

换句话说:有一些div-s。我想始终显示 X div-s。上面的三个 div 将被着色为黑色，最后一个 div 将被着色为灰色。

如果我向下滚动，上面的 3 个 div 将被着色为黑色，最后一个将被着色为灰色。 (如果向上滚动，会发生同样的情况:上面的 3 个 div 将为黑色，最后一个为灰色)。

我不知道为什么在向下或向上滚动(按一次)后滚动事件被调用超过 1 次。它处于循环模式。

(修好后我会做颜色问题)

这是我的jsfiddle:

http://jsfiddle.net/alonshmiel/Ht6Ym/2966/

这是用于滚动的:

jQuery(function($) {
    $('#divContent').scroll(function() {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > divContentScrollTop) {
            divContentScrollTop += (divHeight + 2);
            $("#divContent").scrollTop(divContentScrollTop)
        }
        else {
            divContentScrollTop -= (divHeight + 2);
            $("#divContent").scrollTop(divContentScrollTop)
        }
    })
});

感谢任何帮助。

Answer 1

这是因为您在滚动处理程序中使用 JavaScript 进行滚动。

 $("#divContent").scrollTop(divContentScrollTop)

这会导致 div 滚动，然后触发滚动处理程序，然后再次滚动 div，从而导致无限循环。

您可以更改代码以删除这样的滚动。

jQuery(function($) {
    $('#divContent').scroll(function() {
        var currentScrollTop = $(this).scrollTop();
        if (currentScrollTop > divContentScrollTop) {
            divContentScrollTop += (divHeight + 2);
        }
        else {
            divContentScrollTop -= (divHeight + 2);
        }
    })
});

然后跟踪哪个 div 将位于顶部，您仍然可以进行着色。