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

Question

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

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

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

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

Answer 1

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

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

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

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

如果我必须这样做，我会尝试将数据保留在 URL 中。 但如果天真地完成，这些方法存在严重缺陷。 有人恶意能有这样的数量非常大，在这种情况下，浏览器（S）将同时下载了太多的记录。

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

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

请注意，如下所述：

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

Answer 2

您可以在更改时使用history.replaceState存储您的号码，并在您的页面加载时使用history.state加载它。

带钩子的例子：

const PAGING = 10
// initialize with memorized paging or default if none:
const [numAds, setNum] = useState((history.state && history.state.numAds) || PAGING)
// when scrolling down:
setNum(numAds + PAGING)
history.replaceState({numAds: numAds + PAGING}, '')

Answer 3

我认为最简单的方法是您将一些变量设置为默认值为 true，如果此变量为 true，则仅进行刷新并获取更多项目，当您转到其他页面设置为 false 时，当您返回时，项目将处于状态。