一概述：

IntersectionObserver接口用于可以异步监听目标元素与其祖先或者视窗（viewport）交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)

IntersectionObserver 翻译为 "交叉观察者"，它的任务就是监听目标元素跟指定父元素（用户可指定，默认为viewport）是否在发生交叉行为，

简单理解就是监听目标元素是否进入或者离开了指定父元素的内部

二：定义

1：作用：监听目标元素与其祖先或视窗交叉状态发生改变，用来检测目标元素与root元素刚开始交叉和目标元素与root元素刚开始不交叉

2：图解

3：属性：

threshold=>决定了什么时候触发回调函，值为一个数组，当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过这些指定的临界值时就会触发回调函数

rootMargin=>用来扩大或者缩小视窗的大小，

root=>指定目标元素所在的容器节点（即根元素）。

4：使用：

const observer = new IntersectionObserver(callback, options)
//  observe()的参数是一个DOM节点对象，如果要观察多个节点，就要多次调用这个方法
observer.observe(element);

// 移除一个监听，移除之后，target元素的交叉状态变化，将不再触发回调函数
observer.unobserve(element)

// 停止所有的监听
observer.disconnect();

5：callback 触发条件：

对应元素使用observe方法被添加到监听队列中

对应元素和浏览器可视窗口刚开始产生交叉 --- 进入可视窗口

对应元素和浏览器可视窗口由存在交叉转变为刚开始不交叉 --- 完全离开可视窗口

6：应用场景：

A：懒加载，用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能

B：无限加载，用户到达了页面底部，从而加载新的条目放在页尾栏前面

三：总结

1：一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域

2：IntersectionObserver被创建，则无法更改其配置，只能用来监听可见区域的特定变化值，可在同一个观察者对象中配置监听多个目标元素