javascript - 网站无限滚动 - 在浏览器中用户 'go back' 后返回滚动位置

Question

在无限滚动的页面上，您经常会遇到这样的情况:

• 你经常滚动，
• 然后你点击无限列表中的一些链接，
• 你不喜欢你点击的内容
• 所以你回去
• 您想从离开的地方继续滚动。
• 但是您滚动的所有项目都不存在，您需要再次滚动您已经看到的所有内容。

您如何处理这些情况？你知道有什么解决办法吗？有什么方法可以保存页面状态或至少知道这种情况是什么并加载适当数量的无限列表并将用户滚动到上次看到的项目。

Answer 1

当某个条件为真时滚动时，必须以某种方式加载要附加到页面的新内容，例如，您使用 ajax 调用调用某些页面。假设每次加载更多数据时，您都会加载十个项目。因此，您当前的状态可能是您再加载 10 个项目的次数。您可以保存该信息，例如通过使用 anchor :

www.site.tld/index.php?id=999#load_counter=5

另一种可能性是用 cookie 保存它。您可以尝试在什么时候“保存”该数据是最好的。例如。在每次 AJAX 调用之后或使用 onbeforeunload 事件离开页面时。

当您的页面加载时，您可以检查 cookie 或 url 中是否有可用的元数据。如果有，您可以通过发送 AJAX 请求加载之前加载的列表元素来准确加载该内容。在我的示例中，这将是

5 * 10

因为 load_counter 是 5 并且在每次加载时都会加载 10 个以上的项目。您也可以重建位置。也可以保存 how much the user has scrolled 的信息或者只是猜测假设用户正在查看最后一批加载的项目。例如。您可以滚动到元素 (5-1)*10。这是最后一批的第一个元素。