为什么这个分页自动加载代码不能正常工作？

Question

当用户滚动到页面底部时，我试图进行一些分页，加载更多内容。有没有办法让说几乎到页面底部？比如页面底部的 1/3？

$(window).scroll(function(){
    if ($(window).scrollTop() == ($(document).height() - $(window).height())/3)
    {
        alert('test');
    }
    // ...

这没有任何作用

，但是如果我删除代码中的 3，当我到达底部时（死胡同，无法再滚动），就会弹出警报。但我希望在我快要触底时显示警报。

Answer 1

问题是：

• 您检查它是否完全相等。这种情况很少见。
• 您检查一下它是否位于页面下方的 1/3^rd，而不是 2/3^rds

试试这个 - http://jsfiddle.net/y7Am2/：

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height()) * 2 / 3;
    if ($(window).scrollTop() >= mostOfTheWayDown)
    {
        alert('test');
    }
});

但我建议您使用底部的特定像素值，而不是顶部的小数值。将其基于页脚的高度（简单的手动调整值或计算值）。

您的内容可能不是恒定的高度。如果没有，并且您使用小数值，您将滚动到页面的任意部分，并且加载将排队。这将使您的网站看起来不可预测，或者如果用户习惯于在较长的页面上较早加载，则可能会降低响应速度。

因此，请执行类似的操作 - http://jsfiddle.net/PwZ4D/：

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height())
        - 150 - footerHeight;
    // ...

另请注意，目前实施的每次您在页面底部滚动时，您的事件都会持续触发。这将使大量 AJAX 调用排队。您可能应该在事件中取消绑定 scroll ，然后在 ajax 调用成功完成时重新绑定它。

并小心处理内容很少或没有内容的情况。如果页面是空的或者只有足够的数据来填满一个屏幕，那么如果您做错了事情，它可能会继续不必要地重新查询服务器。

编辑：

根据请求，您可以使用如下代码取消绑定 scroll 事件 - http://jsfiddle.net/5vXJ5/：

$(window).unbind('scroll');

编辑：

再次根据请求，您以与开始绑定它相同的方式重新绑定它。但是，由于您最终得到的是自引用代码，因此您需要命名您的函数。最终的代码可能看起来像这样：

var scrollHandler;
scrollHandler = function(){
  var mostOfTheWayDown = ($(document).height() - $(window).height()) * 2 / 3;

  if ($(window).scrollTop() >= mostOfTheWayDown)
  {
    // So we don't queue up multiple requests until the first one completes
    $(window).unbind('scroll');

    $.ajax({
      url: "test.html",
      context: document.body,
      success: function(){
        $(window).scroll(scrollHandler); // re-bind after it completes
      }
    });
  }
};

$(window).scroll(scrollHandler); // bind by named function

但这只是一个示例。您必须根据您的具体情况对其进行调整。

Answer 2

我认为下面的计算应该更适合您正在寻找的情况 window.scrollTop max is document.height - window.height：

$(window).scrollTop() = $(document).height() - $(window).height() - $(window).height())/3

Answer 3

您可以使用插件，例如

Endless Scroll或
无限滚动

或者直接编写自己的

$(window).scroll(function () { 
   if ($(window).scrollTop() >= ($(document).height() - $(window).height()) - 100) {
      console.log('load more!')
   }
});