Question

我知道有一些类似的问题，关于如何处理事件滚动击中底部或顶部但这里没有答案帮助我到目前为止。我希望当用户滚动到底部和顶部时触发事件（加载一些内容，这里不重要）。问题是，如果用户滚动到底部，我会向上移动一点滚动。我这样做是为了让用户可以通过再次向下滚动来获取新内容，否则他需要上下移动以便他可以加载新内容。当他达到顶峰时发生类似的事情。事情是当我使用scrollTop（）向上移动滚动然后滚动事件发生两次（换句话说，当页面在底部两次时脚本执行事件）。我不能在其他一些问题中使用unbind建议，因为在用户点击一次之后，他将无法再次执行此操作。 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;

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

2 个答案: