jQuery：检测滚动底部不起作用，只检测顶部

Question

所以基本上我的问题是一个看似简单的问题。

你可以在http://furnace.howcode.com看到它的行动（请注意，数据是通过Ajax返回的，所以如果没有任何反应，给它一点时间！）。

想要发生什么，在第二列中，当您到达滚动底部时，会返回下5个结果。

但实际发生的是它只返回5个结果，当你点击滚动区域的顶部。尝试一下：向下滚动，没有任何反应。向上滚动到顶部，返回结果。

怎么回事？

这里是我的代码，我使用的是：

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){ 
     loadMore(); 
    } 
}); 

loadMore();是获取数据并追加其功能。

那么这里怎么回事？谢谢你的帮助！

Answer 1

你的数学是错误的，你说如果滚动条的位置等于列的高度减去列的高度（它等于零）加载更多。这就是为什么你的loadMore()被称为你的上面。

尝试：

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').height()){ 
     loadMore(); 
    } 
}); 

Answer 2

这在过去为我工作。

var col = $('#col2'); 
col.scroll(function(){ 
    if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop())) 
     loadMore(); 
}); 

这里还有一个很好的explanation。

Answer 3

jordanstephens发布的解决方案在正确的轨道上。但是，您需要的不是＃col2的高度，您需要＃col2的父元素的高度。

例子：

$('#col2').scroll(function(){ 
    if ($('#col2').scrollTop() == $('#col2').parent().height()) { 
    loadMore(); 
    } 
} 

Answer 4

下进行了测试，并能正常工作：

$(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
    loadMore(); 
    } 
}); 

Answer 5

也许下面的工作：

1. HTML - 包装无论是内部＃COL2与另一个DIV，说＃col2 - 内部
2. CSS - 设置一个固定heig HT和：仅＃COL2

3. JS '溢出自动' - 见下文插件：

   $.fn.scrollPaging = function (handler) { 
       return this.each(function() { 
        var $this = $(this), 
         $inner = $this.children().first(); 
   
        $this.scroll(function (event) { 
         var scrollBottom = $this.scrollTop() + $this.height(), 
          totalScroll = $inner.height(); 
   
         if (scrollBottom >= totalScroll) { 
          handler(); 
         } 
        }); 
   
       }); 
   }; 
   
   $('#col2').scrollPaging(loadMore); 
   

Answer 6

@munch最接近的，但如果你有元件上的边界，那么你需要使用.innerHeight（）而不是.outerHeight（），因为后者包含边框并且.scrollTop（）不会（如果有填充，则.height（）也会出现）。另外，至少在jQuery 1.7.1以及更早的版本中，我建议使用.prop（'scrollHeight'），而不是直接从DOM中检索它。我发现some talk在IE 5-8上DOM scrollHeight被破坏，jQuery函数为我抽象，至少在IE8上。

var $col = $('#col2'); 
$col.scroll(function(){ 
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop()) 
    loadMore(); 
}); 

Answer 7

我发现了一个可行的方法。

这些答案都不适用于我（目前在FireFox 22.0中测试），经过大量研究后，我发现，似乎是一个更清洁和直接的解决方案。

实施的解决方案：

function IsScrollbarAtBottom() { 
    var documentHeight = $(document).height(); 
    var scrollDifference = $(window).height() + $(window).scrollTop(); 
    return (documentHeight == scrollDifference); 
} 

资源： http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

问候

Answer 8

我知道这个问题已经解决了，但是元素使用问题时的jQuery scrollTOp()功能除了上$(window).scrollTop()或$(document).scrollTop()由于一些问题，如

jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

Explain why scrollTop() always returns 0 here

$(document).scrollTop() always returns 0

所以，你可以使用的

$(window).scrollTop() - $('your_selector').offset().top 

代替

$('your_selector').scrollTOp() 

避免了jQuery scrollTOp()问题。

我的建议如下：

$(window).scroll(function() { 
     var $more = $('#col2'); 
     var top = $(window).scrollTop() - $more.offset().top; 
     if(top + $more.innerHeight() >= $more[0].scrollHeight) { 
      loadMore(); 
     } 
    });