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或 Infinite Scroll

或者只是编写自己的

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

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

3 个答案: