Intersection Observer （ 交叉观察器）

Intersection Observer API 提供了一种方法可以监听目标元素是否展示到视口（viewport），常见的需求场景：

• 图片懒加载
• 滚动动画
• …

Intersection Observer是一个用于异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的API。它提供了一种有效的方法来异步检测元素是否进入或离开视窗（或其祖先元素）。

Intersection Observer的属性和方法如下：

属性：

• root：指定根元素，即目标元素所要观察的祖先元素或顶级文档视窗，默认为视窗。
• rootMargin：指定根元素的边距，可以用来扩展或缩小根元素的边界框，默认为"0px"。
• threshold：一个触发回调的阈值数组，表示目标元素与根元素交叉比例的阈值，默认为[0]，即目标元素与根元素交叉任意部分即可触发回调。

方法：

• observe(target)：开始观察指定的目标元素。
• unobserve(target)：停止观察指定的目标元素。
• disconnect()：停止观察所有目标元素。

回调函数：

• IntersectionObserverEntry对象：当目标元素的交叉状态发生变化时，会触发回调函数，并传递一个IntersectionObserverEntry对象作为参数，包含了与交叉状态相关的信息，例如目标元素的交叉比例、交叉区域的位置等。

在使用Intersection Observer时，可以通过创建一个Intersection Observer实例，并调用其方法来观察目标元素的交叉状态。当目标元素满足指定的交叉条件时，会触发回调函数进行相应的处理，例如加载图片、执行动画等操作。