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(); 
     } 
    });