固定div中的jQuery无限滚动滚动

Question

背景

我正在尝试在固定位置 div 内创建一个无限滚动表。问题是我遇到的所有解决方案都使用窗口高度和文档 scrollTop 来计算用户是否滚动到屏幕底部。

问题

我试图创建一个 jQuery 插件，它可以计算用户是否滚动到带有overflow: scroll; 设置的固定 div 的底部。

我的方法是创建一个包裹表格的包装 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/

问题

显然，我当前的示例不正确。我的问题是如何检测用户何时使用 overflow:scroll 滚动到固定 div 的底部？

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

编辑（14 年 12 月 30 日）：

插件的 DRYer 版本可能更易于重复使用：

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

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