IntersectionObserver 是否进入了“视口“（viewport）

是否进入视口的使用场景还是很多的，一般第一时间想到的就是监听滚动，关键是scroll很密集，计算量很大，如果做个防抖节流性能还能优化一些，否则性能问题就很有可能发生。

IntersectionObserver这个API已经存在很多年了，从来没用过，兼容性几乎也不用考虑：

使用API：

var io = new IntersectionObserver(callback, option);
// 开始观察
io.observe(element);
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

观察多个节点：
io.observe(element1);
io.observe(element2);

callback是可见和不可见时的回调函数。刚刚进入视口（开始可见）和完全离开视口（开始不可见）会被触发，初始化不管可见不可见也会触发。参数entries是一个数组：

  var io = new IntersectionObserver((entries) => {
    console.log(entries)
  })
  io.observe(document.getElementById('test1'))
  io.observe(document.getElementById('test2'))

几个参数：

• boundingClientRect：getBoundingClientRect获取的数据bottom、height、left、right、top、width、x、y
• intersectionRatio：目标元素的可见比例，跟threshold设置的有关，默认0，1
• intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，跟boundingClientRect一样，不过不可见的时候都是0，height等是在可见的时候出现的高度，然后去计算
• isIntersecting：按道理是跟根元素有关的，经过测试表示是否是可见和不可见
• isVisible：看意思是是否可见，不过实验了都是false，不知道干嘛的
• rootBounds：根元素的矩形区域的信息，getBoundingClientRect获取的数据bottom获取的数据
• target：被观察的目标元素，是一个 DOM 节点对象
• time：可见性发生变化的时间，这个元素每一次可见不可见间隔的时间

boundingClientRect：

option配置可选：

threshold：

一个数组，默认[0]，什么时候触发回调函数，即交叉比例（intersectionRatio）：

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

在可见，可见50%，完全可见的时候触发回调。

root：

所监听对象的具体祖先元素(element)。如果未传入值或值为null，则默认使用顶级文档的视窗。一般配合rootMargin使用。

rootMargin：

计算交叉时添加到根(root)边界盒的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。因为滚动可能是窗口也可能是容器，当设置是容器的时候，窗口滚动可能需要设置用来匹配内部需求。

  var io = new IntersectionObserver((entries) => {
    console.log(entries)
  },{
    root: document.getElementById('wrap'),
    rootMargin: '100px 10px'
  })

表示在容器内上下滚动距离可视范围100px的时候就触发回调，左右滚动距离10px的时候触发。

使用场景常用的应该是懒加载和滚动到底部加载更多，有了这个API，图片的懒加载也变得简单了，可能是出于兼容性的原因，现在懒加载和滚动到底部加载更多的库都没有使用。
之后要是有机会，我会直接使用这个API，实在兼容性不行的话再使用监听滚动。

欢迎关注订阅号 coding个人笔记