Javascript 向下或向上滚动处于无限循环中

我正在努力做下一件事：

换句话说，有一些div-s。我希望始终显示X div-s。上面的三个div将以黑色显示，最后一个div将以灰色显示

如果我向下滚动，上面的3个div将被涂成黑色，最后一个div将被涂成灰色。（如果向上滚动，同样的情况也会发生：上面的3个div将显示为黑色，最后一个为灰色）

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

（修复后，我将处理颜色问题）

这是我的JSFIDLE：

这是卷轴：

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

---

感谢您的帮助。

这是因为您在滚动处理程序中使用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将位于顶部，您仍然可以进行着色。

不要使用

alert

进行调试。这样就不可能在页面上测试自然滚动。使用

console.log

。注意，使用

console.log（）

，而不是

alert（）

进行调试。