当前位置: 首页 > Web前端 > JavaScript

Infinitescrollinglist

时间:2023-03-26 22:08:30 JavaScript

原文:ComplexitiesofanInfiniteScroller实现的代码示例无限滚动的使用场景很多,也有一些难点需要注意。页脚中的点赞链接无法访问,因为内容不断将页脚推开;手机从纵向变为横向,您如何处理调整大小事件?或者当列表太长时,如何防止页面卡住。我们将使用3种技术来实现我们的目标:DOM回收、墓碑和滚动锚定。在DOM回收原文中,一段svg动画形象地展示了dom回收的原理。视口中的dom数量是固定且可计算的。因此,在滚动时,将viewport的上边框从dom中删除,可以重新作为dom显示在viewport的下边框。但是,删除和添加dom仍然会消??耗性能。本文给出了更好的实现。位置:绝对;用css模拟dom的删除和添加。另外在csscontainviewportcontainer性能优化一文中有一段是根据列表总数计算高度的,这样滚动条才能真正体现数据长度。IntersectionObserverAPI也提到了,高延迟的问题。最后介绍了Houdini的CompositorWorklet(知乎翻译)Tombstones墓碑,其实就是占位符。placeholderdom元素存在内容大小和真实元素高度不一致的问题。需要引入滚动锚点,锚点用于记录元素的滚动距离和距视口边界的偏移值。替换墓碑和调整窗口大小时将调用滚动锚点