IntersectionObserver的使用

---

前言

​IntersectionObserverAPI，可以自动"观察"元素是否可见，由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API
叫做"交叉观察器"。

它的用法比较简单
就是我们先用new实例化一下

let io = new IntersectionObserver(cb, ops)

IntersectionObserver是浏览器原生提供的构造函数, 接受两个参数：cb是可见性变化时提供的回调函数，ops是配置对象。

 // 开始观察
io.observe(获取的dom)
// 停止观察
io.unobserve(获取的dom)

callback函数

callback = (entries)=>{
	console.log(entries);//所有可见dom的
}

IntersectionObserverEntry 对象

isIntersecting元素是否可见，如果可见为true，否则为false
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时