起因
今天朋友给我了一个无限滚动列表的例子，让我分析一波；给的源码来自掘金的大佬 的文章，在这里感谢大佬的分享。
IntersectionObserver
这个 API 的中文名称叫做 “交叉观察期”，意为被观察的元素与可视窗口是否有重合。这么说可能不是很清晰，其实就是检测被观察元素是否出现在屏幕上。
使用
它是一个构造函数，所以你要以下面的方式调用
const io = new IntersectionObserver(callback, options)
实例 api
添加观察元素
io.observe(eleA)
// 观察多个元素
io.observe(eleA)
io.observe(eleB)
...
取消元素观察
io.unobserve(eleA)
关闭观察器
io.disconnect()
它接收两个参数 callback 和 options，下面来对参数进行具体的解析。
callback
回调函数会被调用两次，一次是元素开始进入视窗，另一次是元素完全离开视窗时。
回调函数接收一个参数 entries 表示的是被观察的进入可视区元素的数组，每个元素 IntersectionObserverEntry 的实现接口如下表：
| 名称 | 类型 | 介绍 | 备注 |
|---|---|---|---|
| time | number | 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒 | |
| target | DomElement | 被观察的目标元素，是一个 DOM 节点对象 | |
| rootBounds | ClientRect | 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null | |
| boundingClientRect | ClientRect | 目标元素的矩形区域的信息 | |
| intersectionRect | ClientRect | 目标元素与视口（或根元素）的交叉区域的信息 | |
| intersectionRatio | number | 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0 |
options
options 参数主要用于配置滚动容器和 callback 的触发时机:
| 名称 | 类型 | 介绍 | 备注 |
|---|---|---|---|
| threshold | number[] | 此属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。 | |
| root | DomElement | 属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。 | |
| rootMargin | string | 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。 |
