没有 .pushstate 的无限回滚按钮

Posted 2023-05-09

【中文标题】没有 .pushstate 的无限回滚按钮

【英文标题】：Infinite scroll back button without .pushstate

【发布时间】：2015-10-21 01:48:14

【问题描述】：

我有一个网站，它使用无限滚动系统来加载我的所有帖子。一切都很好，除了在 Chrome 和有时在 Firefox 中，当用户单击帖子，然后单击后退按钮时，页面完全从顶部重新加载，并且不会费心向下滚动到用户的最后位置。我已经研究了一些解决方案，其中一种是实施.pushState 系统来更新网址，但希望将其保存为最后的手段。

我注意到像 http://imgur.com 和 http://buzzfeed.com 这样的网站都实现了无限滚动系统，但是当用户单击帖子然后单击返回按钮时，它会将它们返回到最后一个位置，而无需更新 url .pushState。他们是怎么做到的呢？谢谢，朱利安

【参考方案1】：

这是一个基于以下 repo 的要点示例。

我们实现了pushState，并将唯一的uuid 推入到窗口历史对象中。 window.history.state.uuid 现在可以作为我们可以查询的东西使用。 在路由更改之前，我们可以获取当前的window.scrollY，并将其存储在uuid 的缓存中。 同样在路由更改 (onpopstate) 时，我们可以使用当前的window.state.uuid 查询我们的缓存，检索scrollY 的位置并调用window.scrollTo(scrollY)。

https://github.com/DockYard/ember-router-scroll