Question

所以我正在尝试实现流行的inifnite滚动插件来替换我当前自制的无限滚动脚本：

http://www.infinite-scroll.com/ ＆安培; https://github.com/paulirish/infinite-scroll

无论如何，似乎这个插件需要页面上有html分页。即由于这些选择：

nextSelector: "div.navigation a:first",
navSelector: "div.navigation",

我的页面上没有分页标记。我不在乎我的网站是否与crawler / js禁用用户兼容。

那么有没有办法在没有物理html分页的情况下实现这个插件？

在我的自定义脚本中，我做了类似的事情：

var $page = 1;

// Load content for $page

$page++;

这样的事情，即我可以作为整数传入起始页吗？

Answer 1

看看这个非常简化的无限卷轴版本，它不需要任何分页元素。

http://www.innovativephp.com/demo/infinitescroll/

Answer 2

您可以使用jQuery / javascript轻松创建它。

现在为任何事情写一个通用都有点困难，但主要原则是：

如果您要加载最新内容（最新的内容，旧版滚动）：

加载第一组元素（天气是blogsposts，图像，引号），它比屏幕高度多一点。将最后一项的ID保存在变量中。
使用setInterval检测用户是否滚动页面，然后加载ID低于您保存的上一个ID的数据。然后继续保存最后一个ID并加载新内容。

这样的事情：

function loadnewdata()
{
    // do ajax stuff, update data.
}
setInterval(
  function (){
    if(($(document).height() - $(window).height() - $(document).scrollTop()) < 500){
    loadnewdata();
    }
  }, 
  500
);

当然，您可以为自己编写loadNewData（）函数。取决于您的数据。如果用户滚动页面，则每500个加载新数据。

使用jQuery Infinite滚动插件没有分页标记？

2 个答案: