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

不完全的渐进增强。使用Ajax时,最好支持后退按钮并提供深层链接。当前无限滚动的实现不支持此功能。无法将状态添加为书签。

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

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

    你们有什么感想?

    最佳答案

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

    从UX的 Angular 来看,无论您是使用hash还是History API重写来修改URL, URL始终代表当前内容的位置。例如,用户期望书签,点击重新加载或将URL复制到其他计算机并单击“执行”,将返回同一页面。

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

  • 07-24 09:49
    查看更多