向下或向上滚动是在无限循环中

Question

我正在尝试做下一件事：

换句话说：有一些div。我想总是显示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会在顶部，你仍然可以进行着色。