如何使无限滚动插件在DIV

How to make infinite-scroll plugin works in a DIV?

本文关键字：DIV 插件 滚动 何使 无限      更新时间：2023-09-26

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

我使用的是jQuery无限滚动插件。

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

在iOS中，它有点工作，而且有缺陷。当我将ol滚动到底部时，它不会加载。然后，当我尝试更多地滚动ol时（它实际上不能再滚动了），它成功地加载了。

下面是我的代码的简单演示

这是演示代码。

取自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">

这是一个工作示例，还有相关文档。

编辑

似乎要使用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);
   }
});
相关文章：