React Hooks 实现虚拟列表无限滚动与自适应输入框
利用 IntersectionObserver 实现虚拟列表无限滚动
设计背景: 用于实现长列表的无限滚动 DOM 渲染的性能,使用虚拟列表,在滚动过程中只展示特定的视野左右的列表项。
一. 核心技术:原生的交叉观察者(IntersectionObserver)
利用交叉观察者可以监听元素在滚动过程中和祖先元素的相交情况,利用这个API可以避免对滚动的监听和频繁的计算。
创建一个 Observer 实例,分别观察列表头尾元素,传入相应的配置,这里头部有个 fixed 定位的 header 所以设置祖
原创
2020-07-24 17:11:40 ·
1685 阅读 ·
0 评论