自定义无限滚动,在滚动视图时删除项目

时间:2014-01-22 23:38:05

标签: scroll infinite-scroll

问题

今天的现代网站可能会使用无限滚动技术来替换分页列表,以便为用户提供更加无缝的体验。

只要用户不向远处向下滚动这意味着您的文档会因大量DOM节点而变得非常复杂,这一切都很好用。当然有一些方法可以缓解这个问题(例如,用适当高度的单个DIV替换溢出的顶部滚动元素),但它们要么很复杂,要么仍然存在缺陷。

想法

我在想是否有人已经看过一个实现,其中滚动出来的项目(顶部或底部)会变得更小更暗,直到它们消失并被相邻的项目取代。

我正在考虑以下各种经验:

  • 滚动
  • 衰落
  • 缩放

当您到达任何文章的底部并点击下面显示的下一个推荐的文章时,可以在Medium.com上看到淡入淡出和缩放(单击标题)。当你点击它并且如果你注意你可以看到原始文章的效果消失,同时被一个向上滑动的新文章取代。 内容滚动可以通过这种方式完成,无限滚动可以更顺畅,更少资源消耗,因为元素可以在运行和就地替换。

当然显示的项目数量当然取决于项目的大小。对于中线文章,它可能是一个文章,也会滚动,直到你将其滚动到最底部(或顶部)。对于像Facebook这样的帖子,它会同时出现更多项目,因为它们不会占用太多的垂直空间。

Coverflow的工作方式与完全显示中间内容的方式类似,其余部分隐藏或缩放/转换。

问题

有人在网上看到过这样的实现吗?如果操作得当,它实际上可以在不占用浏览器的情况下提供更好的无限滚动体验。

但要使我的问题更清晰,更有争议。 您能提供一个有效的(尽管是简化的)此类经验的例子吗?

要求:

  • 当项目滚动时,它会消失(使用淡入淡出/缩放/两者)
  • 当项目出现在底部(或向上滚动时),它们应显示在滚动项目的相反位置
  • 按常用滚动按钮主页结束 Page Up Page Down Space < / kbd>应该工作。
  • 应从DOM中删除不可见的项目
  • 使用某种滚动条也可以以某种方式提供滚动

1 个答案:

答案 0 :(得分:0)