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

【问题标题】：Website Infinite scrolling - return scroll position after user 'go back' in browser网站无限滚动 - 用户在浏览器中“返回”后返回滚动位置
【发布时间】：2015-03-15 07:04:10
【问题描述】：

在无限滚动的页面上经常遇到这样的情况：

你滚动了很多，
然后你点击无限列表中的某个链接，
你不喜欢你点击的内容
所以你回去
您想从您离开的位置继续滚动。
但是您滚动的所有项目都不存在，您需要再次滚动您已经看到的所有项目。

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

【问题讨论】：

你用的是什么框架？（并不是说我可以帮助你很多，我只对 JSF / Primefaces 服务器端和浏览器中的 JS / jQuery 有经验，但仍然 - 也许其他人对你有很好的意见！）

标签： javascript ajax scroll infinite-scroll dynamic-pages

【解决方案1】：

当某个条件为真时滚动时，必须以某种方式加载要附加到页面的新内容，例如，您使用 ajax 调用调用某个页面。假设每次加载更多数据时都会加载十个项目。因此，您当前的状态可能是您再加载 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。这是最后一批的第一个元素。

【讨论】：

【解决方案2】：

这是一个相当不具体的开放式问题，但让我分享一些想法：

您返回的页面正在重新加载（并因此重置）的一个原因是它禁止浏览器缓存它。如果包含滚动的页面不是绝对有有 pragma:no-cache 等，然后尝试不使用。这可能已经解决了问题，因为允许浏览器返回上一个已知状态。
如果这不起作用，或者您需要确保每次页面加载时都有新数据，那么解决方案将取决于您的内容和框架。也许您可以将状态服务器端存储在会话中并相应地重建页面，或者您可以设置一个带有引用的 cookie，并让一些客户端脚本在您重新加载时轮询该点。
除此之外，我只能说大多数无限滚动框架只是说“嗯，这是个问题”，句号。另一种方法是使用显式分页。

【讨论】：

【解决方案3】：

这是一种非常通用的方法，需要根据所使用的前端框架类型进行定制。

scrollTop 保持垂直滚动位置，所以如果你找到一种方法来记忆 scrollTop，你总是可以回到你上次离开的相同位置。

// get reference to your scrollable div
const element = document.getElementById("scrollableDiv");

// store element.scrollTop in local storage.
windows.localStorage.setItem('scrollTop', element.scrollTop);

// get scrollTop value once back to the previous page
const scrollTop = windows.localStorage.getItem('scrollTop')

// apply scrollTop to your scrollable div, to take scroll thumb to the exact position where it was left before
document.getElementById("scrollableDiv").scrollTop = scrollTop;

【讨论】：