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

Question

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

但是当用户单击后退按钮时，它无法恢复滚动位置。

注意1：滚动结束时，我将加载10个广告。假设我们已经加载了约50个广告，并且用户更改了页面。当点击后退按钮时，它将重新加载为空的主页，然后仅加载前10个广告。

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

Answer 1

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

但如果您想要无限滚动并支持后退按钮，您只有几个选择：

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

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

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

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

请注意，如下评论：

如果您不担心在用户离开站点并导航回来时保持滚动位置，那么您可以将原始页面保留在内存中（例如，只需隐藏它，然后在用户导航回来时重新显示它）。