2

经常在无限滚动的页面上，您可能会遇到以下情况：

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

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

4

3 回答 3

3

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

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

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

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

5 * 10

因为load_counter是 5 并且每次加载时都加载了 10 多个项目。您也可以重建位置。要么保存用户滚动了多少的信息，要么只是假设用户正在查看最后一批加载的项目。例如，您可以滚动到元素(5-1)*10。这是最后一批的第一个元素。

于 2015-01-16T16:21:49.957 回答
2

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

  • 您返回的页面正在重新加载（并因此重置）的一个原因是因为它禁止浏览器缓存它。如果包含滚动的页面不是绝对必须有 pragma:no-cache 等，那么请尝试不使用。这可能已经解决了问题，因为允许浏览器返回到最后一个已知状态。

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

  • 除此之外，我只能说大多数无限滚动框架只是说“好吧，这是个问题”，句号。一种替代方法是使用显式分页。

于 2015-01-16T16:18:47.867 回答
0

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

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;
于 2021-08-26T08:38:40.627 回答