IntersectionObserver
IntersectionObserver 是什么？
IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）
IntersectionObserver 解决了什么问题
IntersectionObserver 主要解决了前端开发中目标元素与视口交集（即可见性）监测的问题，并提供了高效且优雅的解决方案，使得开发者能够更好地实现资源按需加载、动态交互效果以及其他基于可见性的功能优化
示例：
const intersectionObserver = new IntersectionObserver((entries) => {
// 如果 intersectionRatio 为 0，则目标在视野外，
// 我们不需要做任何事情。
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log("Loaded new items");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));IntersectionObserver 的 API
实例属性
options 是一个对象，用来配置参数，也可以不填。共有三个属性，具体如下：
IntersectionObserver.root 只读
测试交叉时，用作边界盒的元素或文档。如果构造函数未传入 root 或其值为 null，则默认使用顶级文档的视口。
IntersectionObserver.rootMargin 只读
计算交叉时添加到根边界盒 (en-US)的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素（px）或百分比（%）来表达，默认值为“0px 0px 0px 0px”。
IntersectionObserver.thresholds (en-US) 只读
一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0。
callback
callback 是添加监听后，当监听目标发生滚动变化时触发的回调函数。接收一个参数 entries，即 IntersectionObserverEntry 实例。描述了目标元素与 root 的交叉状态。具体参数如下：
| 属性名称 | 描述 |
|---|---|
| boundingClientRect | 返回包含目标元素的边界信息，返回结果与 element.getBoundingClientRect() 相同 |
intersectionRatio | 返回目标元素出现在可视区的比例, 常用 0 来判断是否出现在可视区域 |
| intersectionRect | 描述根(root)和目标元素之间的相交区域 |
| isIntersecting | 返回一个布尔值: 1. 如果目标元素出现在 root 可视区，返回 true 2. 如果从 root 可视区消失，返回 false |
| rootBounds | 用来描述交叉区域观察者(intersection observer)中的根. |
| target | 目标元素：与根出现相交区域改变的元素 (Element) |
| time | 返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳 |
IntersectionObserver 方法
| 方法名 | 说明 |
|---|---|
| observe() | 开始监听一个目标元素 |
| unobserve() | 停止监听特定目标元素 |
| takeRecords() | 返返回所有观察目标的 IntersectionObserverEntry 对象数组 |
| disconnect() | 使 IntersectionObserver 对象停止全部监听工作 |
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver