使用 IntersectionObserver API 时需要注意的三个点

使用 IntersectionObserver API 可以检查元素在网页中的可见性。通过此 API 可以完成一系列功能，比如：图片懒加载、视频自动暂停播放等与可见性变化相关的功能。

本文介绍我在使用这个 API 时，注意到的三个知识点：

元素可见性默认是相对视口计算的

创建 IntersectionObserver 实例的语法如下：

new IntersectionObserver(callback, option);

在创建这个实例时，如果没有提供 option 选项，或者使用了选项但没有指定 root 属性。那么元素可见性默认是相对视口计算的。

如下图所示：

demo 地址：codepen.io/zhangbao/pe…

上例中，蓝色方块在父元素范围内滚动时，在视口中区域内的可见性发生了变化，触发了回调函数；同样，当在外部滚动，导致蓝色方块可见区域发生变化时，也触发回调函数。

intersectionRatio ≠ threshold

demo 地址：codepen.io/callahad/pe…

图中为蓝色方块设定的 threshold 值为 [0, 1]。

new IntersectionObserver(handler, { threshold: [0, 1] }

以阈值 1 为例，1 并不是触发回调时的 entry.intersectionRatio 的值，它只表示触发回调的契机——从视口中完全显示/刚消失时，触发回调函数。因此在回调函数中访问的 intersectionRatio 值不是完全等于阈值的。

从上图中可以看见，蓝色方块完全进入视口里时，entry.intersectionRatio 的值为 1.0123 左右；离开时， entry.intersectionRatio 值则是 0.9757。

因此我们才可以做这样的判断：

if (ratio >= 1) {
  // 元素完全进入视口
} else {
  // 元素从视口开始离开
}

观察时就会立即执行一次回调

以上面的例子的代码为例。当我们调用 observer 的 observe() 方法观察目标元素 #target 时，

observer.observe(document.getElementById("target"))

会立即触发一次回调，我们可以在控制台中打印看见。

这里打印出了 #target 的一些初始状态信息。

（完）