javascript - 深度链接无限滚动页面

Question

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

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

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

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

大家怎么看？

Answer 1

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

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

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