使用IntersectionObserver 可以让我们快速实现 懒加载 和 虚拟列表
首先我们创建 observer 观察者实例
observer = new IntersectionObserver(callback, options);
options 是配置的参数 (选填)
observer 则是一个观察器实例
- 有一些基础的方法
// 开始观察
observer.observe(document.getElementById('example'));
// 停止观察
observer.unobserve(element);
// 关闭观察器
observer.disconnect();
callback 回调函数
- 回调函数会在观察的元素 开始进入视窗 或者完全离开视窗的时候触发
callback
函数的参数(entries
)是一个数组,每个成员都是一个IntersectionObserverEntry
对象
IntersectionObserverEntry 对象
IntersectionObserverEntry
用来提供目标元素的信息,一共有6个属性
{
time: 3893.92,
rootBounds: ClientRect {
bottom: 920,
height: 1024,
left: 0,
right: 1024,
top: 0,
width: 920
},
boundingClientRect: ClientRect {
// ...
},
intersectionRect: ClientRect {
// ...
},
intersectionRatio: 0.54,
target: element
}
time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒
target:被观察的目标元素,是一个 DOM 节点对象
rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null
boundingClientRect:目标元素的矩形区域的信息
intersectionRect:目标元素与视口(或根元素)的交叉区域的信息
intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
Option 对象
IntersectionObserver
构造函数的第二个参数是一个配置对象。它可以设置以下属性
threshold
属性决定了什么时候触发回调函数。它是一个数组,每个成员都是一个门槛值,默认为[0]
,即交叉比例(intersectionRatio
)达到0
时触发回调函数
new IntersectionObserver(
entries => {/* ... */},
{
threshold: [0, 0.25, 0.5, 0.75, 1]
}
);
// 当目标元素 0%、25%、50%、75%、100% 可见时,会触发回调函数
root rootMargin
使用的频率较低
warning
IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。
规格写明,IntersectionObserver
的实现,应该采用requestIdleCallback()
,即只有线程空闲下来,才会执行观察器。这意味着,这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行
live demo
虚拟列表
虚拟列表通常的方法 是 监听滚动事件 然后更新列表项,这种方法适用性更广,但可能会存在监听滚动的性能问题
同时 IntersactionObserver 无需监听滚动 也能实现虚拟列表的效果
并且实现了 滚动动画,并解决了快速滚动白屏的问题
github/vue-virtual-list-observer
vue-virtual-list-observer - npm (npmjs.com)
参考: