IntersectionObserver 交叉观察器

介绍

​ 用于查看某个元素是否进入了视口（viewport），用户能否看到该元素

用法

// IntersectionObserver 为浏览器提供的构造函数
// 参数： callback 可见性变化时的回调函数  option 配置对象(可选)
let io = new IntersectionObserver(callback, option)

指定观察某个元素

// 开始观察
io.observe(element)
// 停止观察
io.unobserve(element)
// 关闭观察器
io.disconnect()
// 观察多个元素
io.observe(elementA)
io.observe(elementB)

参数详解

-callback参数

目标元素的可见性发生变化时，会触发callback回调函数。

callback回调函数一般会触发两次

• 目标元素刚刚进入视口（开始可见）
• 目标元素完全里开视口（开始不可见）

// entries 是一个数组，每个成员都是一个 IntersectionObserverEntry 对象。
// 如果同时有两个被观察的对象的可见性发生变化，entries 数组就会有两个成员
let io = new IntersectionObserver( entries => {
  console.log(entries)
})

• option 参数

  • threshold：数组，该属性决定了什么时候触发回调函数，默认为0

    // threshold: [0, 0.25, 0.5, 1] 表示当目标元素在 0% 25% 50% 200% 可见时，会触发回调函数
    new IntersectionObserver( entries => {}, { threshold: [0, 0.25, 0.5, 1] })
    

  IntersectionObserver API 支持容器内滚动，一下两个参数为在容器内滚动时可设置的option参数。

  • root：IntersectionObserver API 支持容器内滚动。root属性指定目标元素所在的容器元素（即根元素）。注：容器元素必须是目标元素的祖先节点
  • rootMargin：定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域大小。它使用css的定义方法，比如 1px 4px 6px 8px，表示top、right、bottom、left四个方向的值

IntersectionObserverEntry 对象

• IntersectionObserverEntry 对象提供目标元素的信息，一共有六个属性
  • time：可见性发生变化的时间，是一个高精度时间戳，单位：ms
  • target：被观察的目标元素，是一个Dom对象
    -rootBounds：根元素的矩形区域的信息，getBoundingClicentRect()如果没有根元素则返回null
  • boundingClientRect：目标元素的矩形区域的信息
  • intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
  • intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
  • isIntersecting：目标元素是否可见，Boolean值

实例

• 懒加载

• 无限滚动

  
  
  
    
    
    
    
  
  
    
  
      
  哈哈哈哈哈哈
      
  哈哈哈哈哈哈
      
  哈哈哈哈哈哈
      
  哈哈哈哈哈哈
      
  哈哈哈哈哈哈
      
  哈哈哈哈哈哈
    
    
  
  
  
  
  

注意事项

• IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。
• IntersectionObserver 的实现，采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这个观察器的优先级非常低，只有其他任务执行完成，浏览器才会有空闲执行观察器。

参考资料：

• IntersectionObserver API 使用教程