共计 1646 个字符，预计需要花费 5 分钟才能阅读完成。
应用 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
codeSandBox
虚构列表
虚构列表通常的办法 是 监听滚动事件 而后更新列表项，这种办法适用性更广，但可能会存在监听滚动的性能问题
同时 IntersactionObserver 无需监听滚动 也能实现虚构列表的成果
并且实现了 滚动动画，并解决了疾速滚动白屏的问题
github/vue-virtual-list-observer
vue-virtual-list-observer – npm (npmjs.com)
参考:
阮一峰 IntersactionObserver
MDN
