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

debugcn 发表于 Dev

列维·普特纳（Levi Putna）

背景

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

问题

我试图创建一个jQuery插件，该插件可以计算用户是否已滚动到具有overflow: scroll;set的固定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 set滚动到固定div的底部？

草ana

我认为使用底部元素有点笨拙。相反，为什么在可滚动区域用完后不使用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());
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。