根據滾動位置在表格中加載內容

Question

我正在使用jQuery，並且我已經有一個設置了特定高度的表格，其中overflow:scroll。我想知道我應該訪問什麼，以便知道何時從服務器加載更多數據（我不需要ajax調用幫助或加載實際數據）。相反，我試圖瞭解如何知道我的滾動位置或知道我什麼時候接近數據底部（所以我可以提前加載）。

那麼，我如何知道何時根據滾動位置加載更多數據？

Answer 1

這裏是一個解決方案，使用非標準（但廣泛支持的）scrollHeight屬性：

$("table").on("scroll", function(event) { 
    var $elem = $(event.target); 
    if(event.target.scrollHeight - $elem.scrollTop() === $elem.outerHeight()) { 
    // Scrolled to bottom, load more data 
    } 
}); 

您可能希望在用戶到達底部之前加載更多的數據，如果是的話，你應該使用一些門檻：

$("table").on("scroll", function(event) { 
    var $elem = $(event.target) 
    , threshold = 100; 
    if(event.target.scrollHeight - $elem.scrollTop() + threshold >= $elem.outerHeight()) { 
    // Scrolled to bottom, load more data 
    } 
}); 

如果你不想使用scrollHeight，你必須有一個內部元件，其中可用於計算高度。也許用div包裝table，然後在div上設置overflow: scroll。詳細信息請參見how to tell if you're scroll to bottom。