乐趣区

关于javascript:无限滚动列表

原文:Complexities of an Infinite Scroller

实现的代码示例

有限滚动应用场景很多,有些难点须要留神。比方页脚中的链接无法访问,因为内容一直地将页脚推开;手机从纵向转向横向,您如何解决调整大小事件?或者,当列表过长时,您如何避免页面卡顿。

We are going to use 3 techniques to achieve our goal: DOM recycling, tombstones and scroll anchoring.
咱们将应用 3 种技术来实现咱们的指标:DOM 回收、墓碑和滚动锚定。

DOM recycling
原文中,一张 svg 动图,很形象展现了 dom 回收利用的原理。
视口内的 dom 数量是固定可计算的。所以滚动时,视口上边界被删除 dom,能够复用为视口下边界行将要展现的 dom。
然而 dom 的删除新增,还是会耗费性能。文中给出更好的实现计划。

position:absolute;
应用 css 模仿 dom 的删除新增。
还有,css contain 的视口容器性能优化

文中还有一段依据列表总数计算高度,实现滚动条实在反映数据长度。

Intersection Observer API,也有提及,高提早的问题。
最初介绍了 Houdini’s Compositor Worklet
(知乎译文)

Tombstones 墓碑,其实就是占位符。
占位 dom 元素有实在元素内容大小,高度不统一问题。

须要引入 Scroll anchoring,锚点用来记录元素的滚动间隔以及间隔视口边界的偏移值。
滚动锚定将在替换墓碑以及调整窗口大小时调用

退出移动版