问题
现代网站通常使用无限滚动技术来替换分页列表,为用户提供更无缝的体验。
这看起来很好,只要用户不滚动太远,这意味着您的文档将变得非常复杂,有大量DOM节点。当然,有方法可以缓解这个问题(例如使用单个适当高度的DIV
替换溢出滚动元素上面的内容),但它们要么难以实现,要么仍然存在缺陷。
思路
我在想是否有人已经看到过一种实现方式,其中滚动出屏幕(顶部或底部)的项目会变得越来越小和淡,直到消失并被相邻项替换。
我考虑结合以下体验:
- 滚动
- 淡出
- 缩放
内容滚动可以采用这种方式,无限滚动将更加流畅,资源消耗更少,因为元素将会即时替换并处于原位。同时,同时显示的项目数量取决于项目大小。对于Medium-line文章,可能只会有一篇文章,并且会随着你向下(或向上)滚动而滚动。对于像Facebook这样的帖子,同时显示的项目将会更多,因为它们不需要太多的垂直空间。
Coverflow的工作方式与此类似,因为它完全显示中间内容,其余部分要么被隐藏,要么被缩放/转换。
问题是:有人在网站上见过这样的实现吗?如果做得好,它实际上会让我们获得更好的无限滚动体验,而不会占用我们的浏览器资源。
但要使我的问题更清晰、不容置疑,请提供一个可行的(尽管简化的)示例来展现这种体验。
要求:
- 当一个项目被滚动出去时,它会消失(使用淡入淡出/缩放/两者皆可)
- 当项目出现在底部(或向上滚动时的顶部),它们应该以与滚动出的项目相反的方式显示
- 按下常规滚动按钮 Home, End, Page Up, Page Down 和 Space 应该可以工作。
- 不可见的项目应该从DOM中删除
- 滚动还应该通过某种类型的滚动条可用