JS总结——IntersectionObserverAPI

什么是IntersectionObserver

文档中的描述为:​​​​​​​Intersection Observer API​的IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。祖先元素或视口称为根。

ntersectionObserver能做什么

可以监视页面中的一个元素是否出现在视口中，以此可以衍生出许多功能，当这个元素出现在视口中时，可以处理发送请求，触发动画等等业务。

如何使用

我们来分析一下官方给的案例
在使用之前，我们需要对InterceptionObserver进行注册，并且指定回调，该回调函数即当监视的元素出现在视口中，离开视口时均会触发，当元素绑定上监视器的时候首先会触发一次

关键属性:intersectionRatio属性告诉您当前有多少目标元素在根的交叉比率内可见，值介于 0.0 和 1.0 之间。简单地说，就是元素在页面中的面积和整个元素面积的比值，触发函数的时候元素完全在页面中，则为1，一半面积在页面中则为0.5。

//由于InterceptionObserver是JS原生的API，因此可以直接new 来创建对象
const io = new IntersectionObserver(entries => {//entries是触发回调函数的元素数组
//由于我们可以监视多个元素，可能会出现多个元素同时进入视口触发回调的情况，因此是一个数组
  entries.forEach(entry => {
  //由于元素进入视口和退出视口都会触发
  //如何判断此时元素是进入视口还是退出视口呢?
    if (entry.intersectionRatio > 0) {//通过entry.intersectionRatio属性
    //元素在页面中的面积大于0，则元素出现在视口中，即元素进入视口
      entry.target.classList.add('active');//entry.target即为触发函数的dom元素
    }

    else {
    //元素在页面中的面积=0，则元素不在视口中，即元素离开了视口
      entry.target.classList.remove('active');
    }
  })
})

指定了回调之后，我们还需要给元素绑定上监视器,通过io.observe(element)
可以给多个元素绑定，也可以给一个元素绑定

// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll('.box');
boxElList.forEach((el) => {
  io.observe(el);
})

其他重要函数

• io.unobserve(element) 元素绑定了监视器之后，可以在任意时刻解绑，接触绑定之后，当元素进入视口或离开视口，回调函数均不会执行。
• io.disconnect()。 停止观察其所有目标元素的可见性变化

​
如果我们想让监视的函数只在元素进入页面的时候执行一次，则可以在回调的进入函数中，将监视器清除。

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('active');
      io.unobserve(entry.target)
    }

    else {
      entry.target.classList.remove('active');
    }
  })
})