javascript - 如何使用 waypoint.js 无限滚动？

Question

这就是发生的事情。我有一个名为“home.html”的 html 文档。它包含许多 div，每个 div 都是一个帖子。我还有一个 index.html，其中有一个 div #content。 index.html 中的内容为空，但通过 .load() 调用在 home.html 中填充了 div。此外，在 .load 调用中使用 div:nth-child(-n + 10) 我可以让它只加载前十个帖子。我如何使用 waypoint.js 添加无限滚动呢？因此，一旦滚动条到达底部的 75%，它就会从 home.html 加载接下来的 10 个 div。

Answer 1

在页面上加载 10 个元素后，连接一个将触发操作的 jquery 路点。

操作的第一步是禁用航路点(因此它只触发一次)。然后让它通过 ajax 加载其他数据并将其呈现在页面上。 之后(通过回调)完成后，您将重新激活路径点，以便在用户向下滚动到它时重新开始该过程。

您的应用程序必须跟踪加载了多少元素和哪些元素，因此您的 ajax 请求请求正确的数字(即加载了 10 个，因此下一个请求应从 10 开始并获取 10，下一个请求应从 20 开始并获取 10，等等)。

“75% 的底部路径”很容易在航路点中进行配置。您将为此使用“偏移量”。

查看 waypoint documentation

我将触发无限滚动的 DOM 元素放在我拥有的主网格下方，因此当我加载更多内容时，它会自动将其向下推。