超好用的API之IntersectionObserver

这是个还在草案中的API，不过大部分浏览器均已实现（除了IE）。先看下MDN中的介绍：

IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。祖先元素与视窗viewport被称为根(root)。

不知大家有没有发现随着网页发展，对检测某个（些）元素是否出现在可视窗相关的需求越来越多了？比如：

• 当页面滚动时，懒加载图片或其他内容。
• 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
• 对某些元素进行埋点曝光
• 滚动到相应区域来执行相应动画或其他任务。

一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事，大部分解决办法并不完全可靠，实现方式很丑陋，也极易拖慢整个网站的性能。

IntersectionObserver正因此而生

#API解读：

#1.用法

是以new的形式声明一个对象，接收两个参数callback和options

复制const io = new IntersectionObserver(callback, options)

io.observe(DOM)

复制const options = {
  root: null,
  rootMargin: 0,
  thresholds: 1,
}
const io = new IntersectionObserver(entries => {
  console.log(entries)
  
}, options)

#2.callback

callback是添加监听后，当监听目标发生滚动变化时触发的回调函数。接收一个参数entries，即IntersectionObserverEntry实例。描述了目标元素与root的交叉状态。具体参数如下：

表格中加粗的两个属性是比较常用的判断条件：isIntersecting和intersectionRatio

#3.options

options是一个对象，用来配置参数，也可以不填。共有三个属性，具体如下：

#4.方法

介绍了这么多配置项及参数，差点忘了最重要的，IntersectionObserver有哪些方法？ 如果要监听某些元素，则必须要对该元素执行一下observe

#应用：

#1.图片懒加载

复制const imgList = [...document.querySelectorAll('img')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    
    if (item.isIntersecting) {
      item.target.src = item.target.dataset.src
      
      io.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})


imgList.forEach(img => io.observe(img))

#2.埋点曝光

假如有个需求，对一个页面中的特定元素，只有在其完全显示在可视区内时进行埋点曝光。

复制const boxList = [...document.querySelectorAll('.box')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    
    if (item.intersectionRatio === 1) {
      
      io.unobserve(item.target)
    }
  })
}, {
  root: null,
  threshold: 1, 
})


boxList.forEach(box => io.observe(box))

#3.滚动动画

用上面的例子随便写了一个，太丑勿喷

总之，这是一个相当方便好用的API！

参考链接🔗

MDN: IntersectionObserver

MDN: IntersectionObserverEntry