网站无限滚动 - 返回滚动位置的用户后“回去”在浏览器中

Question

常常与无限滚动页面时可能遇到的情景：

• 您滚动了很多，
• 然后你点击一些从inifinite列表链接，
• 你不喜欢你点击什么
• 所以你回去
• 你想继续从你离开的点滚动。
• 但是您滚动的所有项目都不存在，您需要滚动您已经看到的所有内容。

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

Answer 1

这是一个相当非特异性的，开放式的问题，但让我分享一些想法：

• 一个原因你返回页面重新加载（从而复位）是因为它禁止浏览器缓存它。如果包含滚动页面不是绝对有有杂注：没有缓存等等，然后尝试没有。这可能已经解决了问题，因为允许浏览器返回到最后一个已知状态。

• 如果这不起作用，或者您需要确保每页加载都有新的数据，那么解决方案将取决于您的内容和框架。也许可以将状态服务器端存储在会话中并相应地重建页面，或者可以使用引用来设置cookie，并在重新加载时让一些客户端脚本轮询到该点。

• 除此之外，我可以说的是，大多数无限滚动框架只是说“好吧，这是一个问题”，这段时间。另一种选择是使用明确的分页。

Answer 2

虽然滚动时一定条件为真要追加的网页中以某种方式加载，例如，你调用一些页面，Ajax调用新的内容。假设每次载入更多数据时，您都会载入10个项目。所以你当前的状态可能是你加载10个项目的次数。您可以保存该信息，例如通过使用锚点：

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。这是最后一个批量的第一个元素。