Question

有一个固定高度div，它有滚动条。当其唯一子元素ol滚动到底部时，ol需要加载更多新的li。

我正在使用jQuery infinite-scroll插件。

我无法让这个插件在桌面浏览器的上述情况下工作。

在iOS中，它可以运行，并且有问题。当我将ol滚动到底部时，它不会加载。然后当我尝试滚动ol更多（实际上不能滚动更多）时，它会成功加载。

~~以下是我的代码的a simple demonstration。~~

这是the demonstration code。

Answer 1

取自infinite-scroll文档：

要在有溢出的元素内滚动，请使用本地行为。

因此，不要使用具有溢出的#container元素，只需使用列表中的无限滚动：

$('#container').infinitescroll({
    behavior: 'local',
    binder: $('#container'),
    bufferPx: 0,
    navSelector  : '#nav',    // selector for the paged navigation 
    nextSelector : '#nav a',  // selector for the NEXT link (to page 2)
    itemSelector : 'li'       // selector for all items you'll retrieve
});

将ol作为#container：

<ol id="container">

这是一个working example，而relevant documentation。

修改

似乎要使用local行为，您需要覆盖一个负责确定滚动是否接近底部的方法（尽管这似乎没有出现在文档中的任何位置）。存储库/behaviors/local.js中有一个文件需要包含才能完成这项工作，但我尝试了它并且似乎无法正常工作。因此，您可以使用此代码来处理这些计算：

jQuery.extend(jQuery.infinitescroll.prototype, {
   _nearbottom_local: function infscr_nearbottom_local()
   {
       var opts   = this.options;
       var binder = $(opts.binder);

       return (binder.scrollTop() + binder.innerHeight() >= binder[0].scrollHeight - opts.bufferPx);
   }
});

如何使无限滚动插件在DIV中工作？

1 个答案:

修改