IntersectionObserver

IntersectionObserver可以实现类似于监听目标元素的祖先元素与视窗的交叉状态，简单地说就是能监听到某个元素是否会被我们看到，当我们看到这个元素时，可以执行一些回调函数来处理某些事务。

var io = new IntersectionObserver(callback, option);

上面代码中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

callback 参数

callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。

var io = new IntersectionObserver(
  entries => {
    console.log(entries);
  }
);

上面代码中，回调函数采用的是箭头函数的写法。callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

IntersectionObserverEntry 回调参数（entries）中的对象属性

time：监听器元素的持续时间

target：被观察的目标元素，是一个 DOM 节点对象

rootBounds：根元素的矩形区域的信息，可以用getBoundingClientRect()方法得到，如果没有根元素（即直接相对于视口滚动），则返回null

boundingClientRect：目标元素的矩形区域的信息

intersectionRect：目标元素与视口（或根元素）的交叉区域的信息

intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

option

第二个参数用于配置option对象，该对象可设置下列属性

threshold

该属性设置目标元素可见的占百分比多少时触发回调函数，配置为一个数组，每达到其中一个值就触发回调函数，默认值为[0]

var io = new IntersectionObserver((entries) => {
console.log('entries: ', entries[0].intersectionRatio);
}, {
threshold: [0, 0.5, 1]
})

通过intersectionRatio可以看到目标元素现在的可见比例

root

root属性用于指定监听元素的根元素，即用于检测交叉区域的元素

rootMargin

rootMargin用于扩展收缩rootBounds这个矩形的大小，从而影响交叉区域的大小，设置时传入字符串，对应于css中的”top,right,bottom,left“的设置方式，也可以使用css中的”top/bottom,left/right”的方式