在 WordPress 中使用无限滚动更改 URL（使用 pushState）答案

【问题标题】：Change URL (with pushState) using Infinite Scroll in WordPress在 WordPress 中使用无限滚动更改 URL（使用 pushState）
【发布时间】：2015-09-09 08:55:39
【问题描述】：

我已经从这里设置了无限滚动并且它可以工作：https://github.com/pklauzinski/jscroll。此外，我想更改浏览器地址栏中的 URL，但无法正常工作。 https://github.com/wataruoguchi/clever-infinite-scroll 上也有类似的解决方案，但我想始终只加载下一个帖子，而不是选择器调用的所有帖子。

如何将 pushState 与 jScroll 一起使用？目标是使用 jScroll，滚动到上一个或下一个帖子时需要更改 URL。

【问题讨论】：

标签： jquery wordpress infinite-scroll pushstate jquery-jscroll

【解决方案1】：

您可以使用 jscroll 的 callback 参数在完成加载内容后触发函数。

var currentPage = 1;
$('.jscroll').jscroll({
    // your current jsscroll options
    callback: function() {
        currentPage++;
        History.pushState(null, $('head > title').html(), 'http://yourpageurl.com/page/' + currentPage);
    }
});

在该回调中，您可以使用pushState 来操作浏览器历史记录。用正确的 url 替换 url，如果你的无限滚动也应该向后移动，则更新 currentPage。

您还需要从页面参数滚动到加载时的特定位置。

【讨论】：

谢谢！我找到了github.com/wataruoguchi/clever-infinite-scroll，但它并不完美。向上或向下滚动到上一个或下一个帖子时，我将不得不更改 URL。
你有一些 id 可以用来识别“页面”吗？一种解决方案是使用jQuery.isOnScreen 来识别显示的部分。
“航点”很好。 DIV 类标识 URL data-url=，然后可以使用 pushState 更改它。我稍后会带着我的发现回来。