概念

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。

这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛...

重点看这里 监听目标元素与其祖先或视窗交叉状态的手段 ，其实就是观察一个元素是否在视窗可见。

可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。

API

var io = new IntersectionObserver(callback, options)

其实就是一个简单的构造函数。

以上代码会返回一个 IntersectionObserver 实例， callback 是当元素的可见性变化时候的回调函数， options 是一些配置项（可选）。

我们使用返回的这个实例来进行一些操作。

io.observe(document.querySelector('img')) 开始观察，接受一个DOM节点对象
io.unobserve(element) 停止观察 接受一个element元素
io.disconnect() 关闭观察器

options

root

用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素

threshold

用来指定交叉比例，决定什么时候触发回调函数，是一个数组，默认是 [0] 。

const options = {
	root: null,
	threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))

上面代码，我们指定了交叉比例为0，0.5，1，当观察元素img0%、50%、100%时候就会触发回调函数

rootMargin

用来扩大或者缩小视窗的的大小，使用css的定义方法， 10px 10px 30px 20px 表示top、right、bottom 和 left的值

const options = {
	root: document.querySelector('.box'),
	threshold: [0, 0.5, 1],
	rootMargin: '30px 100px 20px'
}

为了方便理解，我画了张图，如下

首先我们来看下图上的问题，蓝线是什么呢？他就是咱们定义的root元素，我们添加了 rootMargin 属性，将视窗的增大了，虚线就是现在的视窗，所以元素现在也就在视窗里面了。

由此可见，root元素只有在 rootMargin 为空的时候才是绝对的视窗。

说了简单的options，接下来我们看下 callback 。

callback

上面我们说到，当元素的可见性变化时，就会触发callback函数。

callback函数会触发两次，元素进入视窗（开始可见时）和元素离开视窗（开始不可见时）都会触发

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

io.observe($0)

以上代码，请在chrome控制台进行调试，这里我使用了 $0 选择了上一次我审查元素的选择的节点

运行结果如下

我们可以看到callback函数有个 entries 参数，它是个 IntersectionObserverEntry 对象数组，接下来我们重点说下IntersectionObserverEntry对象

IntersectionObserverEntry