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

Question

我有一个使用无限滚动页面的网站，列出了最新的广告。

当用户点击广告预览时，它会将他重定向到产品页面。

但是，当用户点击“后退”按钮时，无法还原滚动位置。

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

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

- Fakhruddin Abdi

Answer 1

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

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

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

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

如果我必须这样做，我会尽量保持数据在URL中。但是，如果使用得不好，这些方法就存在严重缺陷。有人可能会恶意地使该数字非常大，在这种情况下，浏览器将一次性下载太多记录。

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

老实说，我认为分页是解决方案。

请注意，如下所述：

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

- Christopher Davies

---

谢谢@Christopher。我已经知道如何在URL中使用记录编号。但这不是我想要的。 我相信有一种方法可以在不使用URL的情况下处理它。 例如，看看这个网站是如何处理它的 https://divar.ir - Fakhruddin Abdi

在该网站的情况下，他们会将原始页面保留在内存中，这可以通过进入产品页面后刷新，然后点击返回（滚动位置丢失）来证明。 我曾认为您在谈论用户导航离开时如何保持滚动位置。我会相应地更新我的答案。 - Christopher Davies

谢谢...我成功地将页面保留在内存中，并在返回按钮按下时显示它。 - Fakhruddin Abdi

我该如何在Angular应用程序中实现这个？我有一个个人资料卡列表，但我无法将页面存储在本地存储中 :( - iBlehhz

我认为无限滚动是一种反模式：它对于内容消费来说很方便，但对于跟踪、恢复或性能来说并不好；也非常不利于可访问性。如果想要这种便利，应该在普通分页的基础上实现一个滚动层（具有优雅降级）。 - Kamafeather

@FakhruddinAbdi，你是怎么做到的？谢谢。 - Waray Mohamed Amine

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}, '')

- Antoine

Answer 3

我认为简单的方法是设置一些默认为true的变量，只有在该变量为true时才进行刷新和获取更多的项目，当你进入其他页面时将其设置为false，当你返回该页面时，项目将保持原状态。

- Bruno Luiz