深度链接无限滚动页面

Question

5

我正在创建一个无限滚动的页面，它会递归地加载并将下一页的内容附加到当前页面。我认为浏览体验可能非常好，但目前的方法并不完美。

不完整的渐进增强。使用Ajax时，支持后退按钮和提供深度链接总是很好的。目前的无限滚动实现不支持此功能。没有办法将状态添加到书签中。

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

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

你们认为呢？

- Aen Tan

你们会支持向上滚动吗？这可能与此有关... - jcolebrand

2

这应该会给你一些灵感：http://www.20thingsilearned.com/ 一些浏览器可能会有问题，但对于那些落后的人，你总是可以回到常规的旧页面。 - CurtainDog

@CurtainDog，那是一个漂亮的网站。我很着迷。它没有使用哈希，浏览器似乎也没有刷新。这是怎么做到的？ - Aen Tan

通过一些 HTML5 的技巧。这里有一个简短的解释：http://daringfireball.net/linked/2010/11/18/20-things - CurtainDog

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- timdream · Answer 1

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

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

您的无限滚动页面完成URL逻辑的唯一方法是我上面提出的URL哈希。否则就让它保持不变；Twitter在其主页上不更新URL哈希。