jQuery更改滚动导致事件多次触发

Question

我知道有一些类似的问题是关于当滚动到达底部或顶部时如何处理事件，但到目前为止，这里没有任何答案对我有帮助。 我希望在用户滚动到底部和顶部时触发事件（加载一些内容，这里不重要）。问题是如果用户滚动到底部，我会将滚动向上移动一点。我这样做是为了让用户只需再次向下滚动即可获得新内容，否则他需要上下移动才能加载新内容。当他达到顶峰时也会发生类似的事情。事情是当我使用 scrollTop() 向上移动滚动然后滚动事件发生两次（换句话说，当页面位于底部两次时脚本执行事件）。我不能在这里使用其他一些问题中建议的解除绑定，因为在用户触底一次后，他将无法再次这样做。 setTimeout 也没有帮助。

这是当前代码：

$("#scroller").on('scroll', function (e) {
   clearTimeout(_throttleTimer);
   _throttleTimer = setTimeout(function () {
      if($("#scroller").scrollTop() + $("#scroller").innerHeight() >= $("#scroller")[0].scrollHeight)  {
         alert("bottom");
         $("#scroller").scrollTop($("#scroller").scrollTop()-10); //move scroll up a bit
         }else if($("#scroller").scrollTop() == 0)
         {
            alert("top");
            $("#scroller").scrollTop(10); //move scroll down a bit
         }
    }, _throttleDelay);
}); 

您可以在此处查看示例：fiddle。如何解决？

Answer 1

使用这个条件Determine if an element has been totally scrolled:

element.scrollHeight - element.scrollTop === element.clientHeight

Working Fiddle

Answer 2

你的 if 语句错误：http://jsfiddle.net/q0kpu42t/5/

你不需要计时器什么的

var $document = $(document);
$document.ready(function () {

$("#scroller").on('scroll', function () {

       if(this.scrollHeight - this.scrollTop === this.clientHeight)  {
            alert("bottom");

            $(this).scrollTop($(this).scrollTop()-10);

        }else if($(this).scrollTop() == 0)
            {
              alert("top");

              $("#scroller").scrollTop(10);
            }

    });
});
console.log($("#scroller")[0].clientHeight);
console.log($("#scroller").innerHeight());
$("#scroller")[0].scrollTop=10;