在无限滚动的页面上，您可能会遇到以下情况：
- 你滚动了很多，
- 然后你点击一些链接从无限列表，
- 您不喜欢自己点击的内容
- 所以你回去
- 您想从离开的位置继续滚动。
- 但是您正在滚动的所有项目都不存在，您需要再次滚动已经看到的所有内容。
您如何处理这些情况？你知道有什么解决方案吗？有没有办法保存页面的状态，或者至少知道这种情况是什么，并加载适当的无限列表并将用户滚动到上次看到的项目。
当某个条件为真时滚动时，必须以某种方式加载要附加到页面的新内容，例如，您使用 ajax 调用调用某个页面。假设每次加载更多数据时，都会加载十个项目。因此，您当前的状态可能是您再加载 10 个项目的次数。您可以保存该信息，例如通过使用锚点：
www.site.tld/index.php?id=999#load_counter=5
另一种可能性是用饼干保存它。您可以尝试在哪个时间"保存"该数据是最好的。例如，在每次 AJAX 调用之后或使用 onbeforeunload 事件离开页面时。
加载页面后，您可以检查 cookie 或 url 中是否有可用的元数据。如果有，您可以通过发送 AJAX 请求来准确加载该内容，该请求加载之前加载的列表元素。在我的示例中，这将是
5 * 10
因为load_counter是 5，每次加载时都会加载 10 多个项目。您也可以重建位置。要么通过保存用户滚动了多少的信息，要么只是猜测假设用户正在查看最后一批加载的项目。例如，您可以滚动到元素(5-1)*10。这是最后一个批量的第一个元素。
这是一个相当不具体的开放式问题，但让我分享一些想法：
-
您返回的页面重新加载（从而重置）的一个原因是因为它禁止浏览器缓存它。如果包含滚动的页面不是绝对必须有杂注：无缓存等，那么请尝试没有。这可能已经解决了问题，因为允许浏览器返回到上一个已知状态。
-
如果这不起作用，或者您需要确保每次页面加载都有新数据，那么解决方案将取决于您的内容和框架。也许您可以将状态服务器端存储在会话中并相应地重建页面，或者您可以设置一个带有引用的cookie，并在您重新加载时让一些客户端脚本轮询到该点。
-
除此之外，我只能说大多数无限滚动框架只是说"嗯，这是一个问题"，句号。另一种方法是使用显式分页。
这是一种非常通用的方法，需要根据所使用的前端框架类型进行自定义。
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;