IntersectionObserver学习（一）

前言

网页开发中，我们经常要检测某个元素是否显示在了界面上（用户能不能看到它），而IntersectionObserver可以很快速的帮我实现这一功能；
IntersectionObserver可以对某一个元素进行监听，当这个元素显示到界面上的时候，会有回调，我们可以再回调中，进行逻辑的处理；

IntersectionObserver使用

四步骤：

• 创建观察器对象；
• 开始观察某一元素；
• 停止观察某一元素；
• 关闭观察器

一、创建观察器对象

var io = new IntersectionObserver(callback, option);

两个参数：

• callback：回调函数，目标元素的可见性变化时，就会调用观察器的回调函数

callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）
callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象

• Option：可选的配置对象；

二、开始观察某一元素

使用observe方法；

let example = document.getElementById('example');
io.observe(example);

observe可以观察多个节点元素，如果要观察多个节点，就要多次调用这个方法。

三、停止观察某一元素

使用unobserve方法；

io.unobserve(example);

unobserve也可以调用多次，停止观察多个元素；

四、关闭观察器

io.disconnect();