共计 985 个字符，预计需要花费 3 分钟才能阅读完成。
IntersectionObserver
介绍
IntersectionObserver 翻译为 “ 交叉观察者 ”。提供了一种 异步 观察目标元素与其 祖先元素（默认是顶级文档视窗）交叉状态的方法，祖先元素被称为根(root)。
1、IntersectionObserver 是异步的，不随着目标元素的滚动同步触发。应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。
2、必须是子元素跟祖先元素发生交叉。
语法
1、构造函数
const io = new IntersectionObserver(cb,options);2、回调函数
发生交叉的回调，接受一个 entries 参数，返回当前已监听并且发生了交叉的目标集合
new IntersectionObserver(entries => {entries.forEach(entry => console.log(entry));
// ...
});我们看看 entry 里面包含哪些常用属性：
| 属性 | 说明 |
|---|---|
| target | 目标元素 |
| isIntersecting | 字面理解为是否正在交叉，可用做判断目标元素是否可见 |
| intersectionRatio | 目标元素可见区域的占比, 即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0 |
3、options
顾名思义，它是一个配置参数，对象类型，非必填，有 3 个属性如下：
| 属性 | 说明 |
|---|---|
| root | 指定祖先元素，默认为视窗 |
| rootMargin | 触发交叉的偏移值，默认为 ”0px 0px 0px 0px”（上左下右，正数为向外扩散，负数则向内收缩） |
| threshold | 该属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个阈值，如[0, 0.25, 0.5, 0.75, 1]，默认为[0] |
4、实例方法
| 属性 | 说明 | 参数 |
|---|---|---|
| observe | 开始监听一个目标元素 | 节点 |
| unobserve | 停止监听一个目标元素 | 节点 |
| takeRecords | 返回所有监听的目标元素集合 | |
| disconnect | 停止所有监听 |
实例
图片懒加载
动画展示
MutationObserver
ResizeObserver
PerformanceObserver
参考资料
轻轻松松实现高难度懒加载、吸顶、触底
IntersectionObserver API 使用教程
正文完
