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

Question

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

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

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

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

Answer 1

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

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

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

当用户访问无限滚动页面时，根据你存储在URL/local storage/wherever的状态恢复状态。

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

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

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

注意，如下评论：

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

Answer 2

您可以在页面加载时使用 history.replaceState when it changes, and load it with history.state 存储您的号码。

示例hooks：

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 以及返回项目时将处于状态。

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

Restore scroll position on infinite scroll page

javascript

scroll

infinite-scroll

reactjs

react-router