javascript - 使用后退按钮和 Ajax Dom 操作保持滚动位置

Question

我正在使用 ajax 无限滚动加载结果，但是，当您单击列表中的项目并离开页面，然后单击后退按钮时，您将返回到列表顶部。

我不知道如何让用户返回到他们离开的位置。

查看我正在处理的站点: https://www.studenthouses.com/search/manchester/

向下滚动几次，然后单击某个属性，然后单击返回，您就会明白我的意思了。

我不记得结果位置并加载它们，因为这会花费太长时间，所以我真的需要浏览器在返回页面时记住 DOM，或者以某种方式缓存它。

有解决办法吗？

非常感谢

Answer 1

当然有，而且小菜一碟。好吧，实际上它是一个 cookie :)

你不需要太多来解决这个问题。

首先，在这里获取一些 cookie:Cookie API

其次，您必须以某种方式对 cookie 中的数据进行编码。如果您有多个这样的页面，则必须以某种方式将它们分开或使用键值对并存储如下内容:

manchester=3522

每当您进入页面时，加载 cookie，等待页面完全展开(您使用 AJAX 或类似工具，您将不得不等待页面展开 em>, window.onload 不行)。

如果没有cookie，跳过这一步:

• 将页面向下滚动到您从 cookie 加载的偏移量:scrollTo

接下来，每当页面滚动时，修改cookie。为避免抖动，您需要以轮询 方式执行此操作。在大约 500 毫秒处使用 setInterval() 并检查用户是否更改了滚动位置。如果他这样做了，用新值保存 cookie。