背景

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/

问题

显然我当前的例子不正确。我的问题是如何检测用户何时滚动到具有溢出的固定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();

编辑（12/30/14）：

该插件的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();

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

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

背景

问题

问题

2 个答案: