javascript - 恢复无限滚动页面上的滚动位置

Question

我有一个无限滚动页面的网站，其中列出了最新的广告。 当用户点击广告预览时，系统会将他重定向到产品页面。

但是当用户点击后退按钮时，它不能恢复滚动位置。

注意 1:当滚动到尽头时，我将加载 10 个广告。假设我们加载了大约 50 个广告并且用户更改了页面。当点击后退按钮时，它会重新加载空白的主页，然后它只加载前 10 个广告。

注意 2:我正在使用 react js 和 react-router，并且已经尝试在社区中找到解决方案。由于最近 chrome 支持滚动恢复，他们并没有为此做太多事情。但是 chrome 不支持无限滚动。

Answer 1

我通常认为无限滚动是一种反模式。如果您改用分页，浏览器的行为就更容易预测了。

但是如果你想要无限滚动w/后退按钮支持，你只有几个选择:

• 在用户滚动时更改 URL，以便记录数存储在 URL 中
• 将记录数存储在其他地方(本地存储/cookie)

当用户访问无限滚动页面时，根据你存储在URL/本地存储/任何地方的状态恢复状态。

如果我必须这样做，我会尝试将数据保留在 URL 中。但如果天真地完成，这些方法会存在严重缺陷。恶意人士可能会使该数字变得非常大，在这种情况下，浏览器会一次下载方式太多记录。

因此，我可能会做的只是获取与他们在之前的滚动位置看到的内容相匹配的记录窗口。您可以在其下方无限滚动，并且可以在其上方添加“加载以前的记录”或其他内容。这将防止返回导航一次获取太多记录。

老实说，我认为分页就是答案。

注意，如下评论:

如果您不担心在用户离开网站并返回时保持滚动位置，那么您可以将原始页面保留在内存中(例如，只需将其隐藏，然后在用户返回时重新显示)。