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

您遇到的问题是，当滚动，正在产生新的滚动事件。你的代码可能有其他问题，但这是一个开始。