Question

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

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

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

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

Answer 1

我通常认为无限卷轴是反模式。如果您使用分页，则浏览器的行为更具可预测性。

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

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

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

如果我有这样做，我会尝试将数据保存在网址中。但如果天真地做，这些方法存在严重缺陷。有人恶意可以使这个数字非常大，在这种情况下，浏览器会一次下载 way 太多的记录。

所以，我可能做的只是获取与他们在之前滚动位置看到的记录相匹配的记录窗口。你可以在它下面无限滚动，你可以添加一个＆＃34;加载以前的记录＆＃34;或者上面的东西。这样可以防止反向导航一次获取太多记录。

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

请注意，如下所示：

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

Answer 2

当号码更改时，您可以将其与history.replaceState存储在一起，并在页面加载时将其与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

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

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

3 个答案: