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

Rob*_*nik 6 scroll infinite-scroll

问题

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

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

这个想法

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

我正在考虑以下经验:

  • 滚动
  • 衰退
  • 缩放

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

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

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

这个问题

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

但要使我的问题更清晰,更有争议.你能提供这种经验的工作(尽管是简化的)例子吗?

要求:

  • 当一个项目滚动时,它会消失(使用淡入淡出/缩放/两者)
  • 当项目出现在底部(或向上滚动时)时,它们应显示在与滚动项目相反的项目中
  • 迫切通常滚动按钮Home,End,Page Up,Page DownSpace应工作.
  • 应该从DOM中删除不可见的项目
  • 滚动应该以某种方式使用某种滚动条可用