阅读 187

使用 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 {
  // 元素从视口开始离开
}
复制代码

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

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

observer.observe(document.getElementById("target"))
复制代码

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

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

(完)