Question

我希望一个事件在用户滚动时加载更多内容并且几乎到达页面的底部，比如从底部开始大约100px，问题是每次滚动时事件都会被触发页面，所以这是一个明显的问题，不可能发生，原因很明显，所以我想知道我怎么能做到最好，我已经在这里检查了其他答案/问题，但是一个部分工作的解决方案不符合什么我需要它做，当我尝试改变它，它会，它每次完全冻结我的浏览器。这是个问题： Check if a user has scrolled to the bottom

我正在看的答案接近底部，但这是他建议的代码：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

现在就像我说的那样，这确实有效，并且可以防止多个事件被触发，问题是我需要触发无数的事件，比如我到达底部时加载100行信息，但是有还有1500多，我需要它重复每次加载每一个信息量（一旦你到达页面的底部100px部分每次）

所以我试图做的是：

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

像我说的那样，每次立即冻结我的浏览器，绑定部分。

Answer 1

我也有同样的问题。我遇到了这个link，它真的有帮助（并且有效）！

更新：我查看了代码，我认为当你重新绑定时，你错过了重新绑定的功能。

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);

Answer 2

这会对你有帮助。

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

浏览此链接查看整篇文章，并详细说明如何触发多个事件。

load more content when browser scroll to end of page in jquery

Answer 3

我遇到了同样的问题。为了解决它，我使用underscore.js库来防止多个事件被触发。链接在这里。 http://underscorejs.org/#throttle

当滚动到页面的底部100px时，jQuery加载内容，多个事件被触发

3 个答案: