详解 Intersection Observer API ( 交叉观察器 )

一、介绍

Intersection Observer API 提供了一种方法可以监听目标元素是否展示到视口（viewport），常见的需求场景：

• 图片懒加载
• 滚动动画
• …

上述的需求，以往一般监听 scroll 事件，利用 getBoundingClientRect()方法获取目标元素的位置信息。由于监听 scroll 事件，不断地触发回流，对性能有一定的影响，不过可以通过函数节流解决，但是 getBoundingClientRect() 方法对性能造成的影响无法有效优化的。

！！！所以，浏览器为了解决上述难题，推出了IntersectionObserver API ，由于方法是异步的，不影响主线程的执行效率。

二、兼容性

兼容市面的主流浏览器，总体来说乐观，不过为了代码的严谨，简单判断下：

if (window?.IntersectionObserver) {
	let io = new IntersectionObserver(callback, options)
	io.observe(targetElement)
}
1
2
3
4

三、内置方法/属性

let io = new IntersectionObserver(entries => {
	// IntersectionObserverEntry 作为一个参数返回
	console.log(entries)
}, { root: null, rootMargin: '0px 0px', threshold: [0.5, 1] })

// 开始监听
io.observe(targetElement)
// 停止监听
io.unobserve(targetElement)
// 结束监听器
io.disconnect()
1
2
3
4
5
6
7
8
9
10
11

以上我们可以看到，IntersectionObserver 接收一个回调函数，和一个对象options作为参数。

IntersectionObserverEntry 实例作为entries参数被传递到回调函数，提供此时元素的相关信息。

---

查看 entries 具有哪些属性：

---

API 提供的方法/属性：

四、使用

我们这里写一个滚动更新元素内容/样式功能：

HTML：

<div class="container">
  <div class="item" data-id="1">元素1：不可见</div>
  <div class="item" data-id="2">元素2：不可见</div>
  <div class="item" data-id="3">元素3：不可见</div>
  <div class="item" data-id="4">元素4：不可见</div>
  <div class="item" data-id="5">元素5：不可见</div>
</div>
1
2
3
4
5
6
7

JS： 当目标元素完全暴露/非完全暴露时，修改文字/背景颜色

<script>
  if (window?.IntersectionObserver) {
    let items = [...document.getElementsByClassName('item')] // 解析为真数组，也可用 Array.prototype.slice.call()

    let io = new IntersectionObserver(entries => {
      entries.forEach(item => {
        // intersectionRatio === 1说明该元素完全暴露出来
        if (item.intersectionRatio === 1) {
          item.target.style.backgroundColor = 'deeppink'
          item.target.innerHTML = `元素${item.target.getAttribute('data-id')}：完全可见`
        } else {
          item.target.style.backgroundColor = 'deepskyblue'
          item.target.innerHTML = `元素${item.target.getAttribute('data-id')}：不可见`
        }
      })
    }, {
      root: null,
      rootMargin: '0px 0px',
      threshold: 1 // 阀值设为1，当只有比例达到1时才触发回调函数
    })

    items.forEach(item => io.observe(item))
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

五、相关链接

• Intersection Observer API