深度链接无限滚动页面

Question

我正在创建一个无限滚动的页面，该页面递归加载下一页的内容并将其附加到当前页面中。我认为浏览体验可以是很棒的、身临其境的，但当前的方法并非没有可用性缺陷。

不完全的渐进增强。使用 Ajax 时，支持后退按钮并提供深度链接总是好的。当前的无限滚动实现不支持这一点。无法为状态添加书签。

关于改善无限滚动用户体验的一些想法。需要意见。

1. 每次加载时更改 URL 哈希，例如 /!#/2 -> /!#/3
2. 单击后退按钮应向上滚动页面。单击前进按钮应向下滚动。
3. 访问深层链接的行为应该像 Ajax 之前一样。转到第 3 页以及从第 3 页开始应该仅显示第 3 页的内容，而不显示第 2 页和第 1 页，因为用户没有要求它们。
4. 应该仍然有办法让他转到第 2 页和第 1 页，就像常规分页一样。由于第3页加载时scrollTop为0，因此向上滚动事件没有用处。为此，我们可能仍然需要一个可点击的链接。
5. 我们需要检查请求的页码是否大于当前页码，因为我们不应该在第 3 页的末尾加载第 2 页的内容。

你们有什么感想？

Answer 1

有趣的问题。我建议以 的形式更改 URL 哈希#!/from/123/to/456，并to在页面加载时增加 ids。

无论您是使用哈希还是History API重写来修改URL，从UX意义上来说，URL始终代表当前内容的位置。例如，用户期望有一个书签，点击重新加载，或将 URL 复制到其他计算机并单击“Go”，将返回相同的页面。

让你的无限滚动页面完成URL逻辑的唯一方法就是我上面建议的URL hash。否则就离开它；Twitter 不会更新其主页上的 URL 哈希值。