jQuery無限滾動滾動固定格

Question

背景

我想創建一個固定位置div內的無限滾動表。問題是我遇到的所有解決方案都使用窗口高度和文檔scrollTop來計算用戶是否滾動到屏幕底部。

問題

我試圖創建一個jQuery插件如果用戶已經滾動到固定div的底部與集overflow: scroll;可以計算。

我的方法是創建一個包裝表格的包裝div（包含固定位置和溢出的div：滾動），我還將另一個div放在表格的底部。然後我試着計算wrapper.scrollTop（）是否大於底部的div position.top每次包裝都滾動。然後我加載新記錄並將它們附加到表體中。

$.fn.isScrolledTo = function() { 
    var element = $(this); 
    var bottom = element.find('.bottom'); 

    $(element).scroll(function() { 
     if (element.scrollTop() >= bottom.position().top) { 
      var tableBody = element.find("tbody"); 
      tableBody.append(tableBody.html()); 
     } 
    }); 
}; 

$('.fixed').isScrolledTo(); 

見例http://jsfiddle.net/leviputna/v4q3a/

問題

顯然我目前的例子是不正確的。我的問題是如何檢測用戶何時滾動到具有溢出的固定div底部：scroll set？

Answer 1

我認爲使用底部元素有點笨拙。相反，一旦可滾動區域用完，爲什麼不使用scrollHeight和height來測試。

$.fn.isScrolledTo = function() { 

    var element = this, 
     tableBody = this.find("tbody"); 

    element.scroll(function(){ 
     if(element.scrollTop() >= element[0].scrollHeight-element.height()){ 
      tableBody.append(tableBody.html()); 
     } 
    }); 

}; 

$('.fixed').isScrolledTo(); 

EDIT（14年12月30日）：

插件的乾燥機版本可能更加重用：

$.fn.whenScrolledToBottom = function (cback_fxn) { 
    this.on('scroll',this,function(){ 
     if(ev.data.scrollTop() >= ev.data[0].scrollHeight - ev.data.height()){ 
      return cback_fxn.apply(ev.data, arguments) 
     } 
    }); 
}; 

插件使用方法：

var $fixed = $('.fixed'), 
    $tableBody = $fixed.find("tbody"); 

$fixed.whenScrolledToBottom(function(){ 
    // Load more data.. 
    $tableBody.append($tableBody.html()); 
}); 

Answer 2

我已經修改了你的代碼來處理與定時器閾值滾動事件：

$.fn.isScrolledTo = function() { 
    var element = $(this); 
    var bottom = element.find('.bottom'); 


    $(element).scroll(function(){ 
     if (this.timer) clearTimeout(this.timer); 
     this.timer=setTimeout(function(){ 
     if(element.scrollTop() >= bottom.position().top){ 
      var tableBody = element.find("tbody"); 
      tableBody.append(tableBody.html()); 
     } 
     },300); 
    }); 


}; 

$('.fixed').isScrolledTo(); 

您遇到的問題是，當滾動，正在產生新的滾動事件。你的代碼可能有其他問題，但這是一個開始。