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

时间:2011-12-13 06:17:53

标签: jquery window scroll height document

当用户滚动到页面底部时,我正在尝试进行一些分页,加载更多内容。有没有办法说几乎到页面底部?可能就像页面底部的1/3一样?

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

这没有做任何事情

但是如果我在代码中删除了3,当我到达底部时警告弹出(死胡同,不再滚动)。但是当我差不多到底时,我希望警报显示出来。

3 个答案:

答案 0 :(得分:2)

问题是:

  • 您检查完全是否相等。这将是罕见的
  • 你检查页面上是否是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

这只是一个例子。您必须根据具体情况进行调整。

答案 1 :(得分:0)

我认为下面的计算对于您正在寻找案例window.scrollTop max is document.height - window.height的内容应该更正确:

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

答案 2 :(得分:0)

您可以使用插件,例如

Endless ScrollInfinite Scroll

或者只是编写自己的

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