Intersection Observer API 配置选项详解：root、threshold 和 rootMargin

咱们程序员平时开发网页，经常会遇到需要判断元素是否进入可视区域的需求。以前，实现这种效果通常依赖于监听 scroll 事件，然后通过 getBoundingClientRect() 等方法计算元素的位置，再进行判断。这种方式不仅代码繁琐，而且频繁的计算还会影响页面性能，尤其是在移动端，体验那叫一个酸爽。

好在，现在有了 Intersection Observer API，它提供了一种异步观察目标元素与其祖先元素或顶级文档视口交叉状态变化的方法。简单来说，就是浏览器帮你盯着目标元素，一旦它进入或离开可视区域，浏览器就会通知你，你只需要处理相应的回调函数就行了，省时省力，性能还好。

今天，咱们就来深入聊聊 Intersection Observer API 的配置选项，特别是 root、threshold 和 rootMargin 这三个核心选项，并通过详细的例子，让你彻底掌握它们的用法，告别“滚动监听”的烦恼。

Intersection Observer API 简介

在正式开始之前，咱们先简单回顾一下 Intersection Observer API 的基本用法。要使用 Intersection Observer API，首先需要创建一个 IntersectionObserver 对象，并传入一个回调函数和可选的配置对象：

const observer = new IntersectionObserver(callback, options);

callback 函数会在目标元素与 root 元素（或视口）的交叉状态发生变化时被调用。它接收一个 entries 参数，这是一个 IntersectionObserverEntry 对象数组，每个对象代表一个被观察的目标元素。IntersectionObserverEntry 对象包含了目标元素的信息，比如：

• boundingClientRect：目标元素的边界矩形信息。
• intersectionRatio：目标元素与 root 元素的交叉比例（0 到 1 之间）。
• intersectionRect：目标元素与 root 元素的交叉区域的边界矩形信息。
• isIntersecting：目标元素是否与 root 元素相交（true 或 false）。
• rootBounds：root 元素的边界矩形信息（如果 root 为 null，则为视口的边界矩形信息）。
• target：目标元素。
• time：交叉状态发生变化的时间戳。

options 对象用于配置 Intersection Observer 的行为，它包含以下几个属性：

• root：指定用于检测可见性的 root 元素。如果为 null，则默认为浏览器视口。
• rootMargin：一个在计算交叉时添加到根(root)边界盒bounding box的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要。默认值是”0px 0px 0px 0px”。
• threshold：一个数字或数字数组，表示目标元素与 root 元素的交叉比例达到多少时触发回调函数。默认值是 0。

创建好 IntersectionObserver 对象后，就可以调用 observe() 方法来观察目标元素了：

observer.observe(targetElement);

当不再需要观察时，可以调用 unobserve() 方法停止观察：

observer.unobserve(targetElement);

或者，也可以调用 disconnect() 方法停止观察所有目标元素：

observer.disconnect();

配置选项详解

接下来，咱们就重点讲解 root、threshold 和 rootMargin 这三个配置选项。

1. root

root 选项用于指定 Intersection Observer 的根元素。默认情况下，根元素是浏览器视口（viewport）。但是，有时候咱们可能需要将某个特定的元素作为根元素，比如一个滚动容器。这时，就可以通过 root 选项来指定。

举个例子，假设咱们有一个滚动容器 #container，里面有一些列表项 #item：

<div id="container" style="height: 200px; overflow: auto;">
  <div id="item1" class="item">Item 1</div>
  <div id="item2" class="item">Item 2</div>
  <div id="item3" class="item">Item 3</div>
  ...
</div>

如果咱们想监听这些列表项是否进入了 #container 的可视区域，就可以将 #container 设置为 root：

const container = document.getElementById('container');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry.target.id, '进入了 #container 的可视区域');
    } else {
      console.log(entry.target.id, '离开了 #container 的可视区域');
    }
  });
}, { root: container });
 
const items = document.querySelectorAll('.item');
items.forEach(item => {
  observer.observe(item);
});

这样，当列表项滚动进入或离开 #container 的可视区域时，就会触发回调函数。注意，如果 #container 没有设置高度或者 overflow: auto，那么它的可视区域就是整个文档，root 选项也就失去了意义。

2. threshold

threshold 选项用于指定一个或多个触发回调函数的阈值。阈值是一个介于 0 到 1 之间的数字，表示目标元素与 root 元素的交叉比例。当交叉比例达到或超过阈值时，就会触发回调函数。

threshold 可以是一个数字，也可以是一个数字数组。如果是一个数字，表示只有一个阈值；如果是一个数组，表示有多个阈值，每个阈值都会触发回调函数。

比如，threshold: 0 表示目标元素刚开始与 root 元素相交时（即交叉比例为 0）就会触发回调函数。threshold: 1 表示目标元素完全进入 root 元素时（即交叉比例为 1）才会触发回调函数。

// 当目标元素刚开始进入 root 元素时触发
const observer1 = new IntersectionObserver(callback, { threshold: 0 });
 
// 当目标元素完全进入 root 元素时触发
const observer2 = new IntersectionObserver(callback, { threshold: 1 });
 
// 当目标元素进入 root 元素 50% 时触发
const observer3 = new IntersectionObserver(callback, { threshold: 0.5 });
 
// 当目标元素进入 root 元素 25%、50%、75% 时分别触发
const observer4 = new IntersectionObserver(callback, { threshold: [0.25, 0.5, 0.75] });

通过设置不同的 threshold 值，可以实现各种各样的交互效果，比如：

• 图片懒加载：threshold: 0，当图片刚开始进入视口时就加载。
• 无限滚动：threshold: 0.1，当列表底部接近视口时就加载更多数据。
• 吸顶效果：threshold: 1，当元素完全进入视口时就固定在顶部。
• 曝光埋点: threshold: 0.5，当元素曝光面积超过一半时上报

3. rootMargin

rootMargin 选项用于扩展或缩小 root 元素的边界。它可以让你在计算交叉时，将 root 元素的边界向外或向内扩展一定的距离。这在某些场景下非常有用，比如：

• 提前加载：你可能希望在目标元素进入视口之前就提前加载它，这时就可以将 rootMargin 设置为一个正值，将 root 元素的边界向外扩展，使得目标元素在进入视口之前就被认为是相交的。
• 延迟触发：你可能希望在目标元素完全进入视口之后再触发回调函数，这时就可以将 rootMargin 设置为一个负值，将 root 元素的边界向内收缩，使得目标元素只有在完全进入视口之后才被认为是相交的。

rootMargin 的值是一个字符串，类似于 CSS 中的 margin 属性，可以设置四个方向的值，比如：

• rootMargin: '10px'：将 root 元素的边界向外扩展 10px。
• rootMargin: '10px 20px'：将 root 元素的上下边界向外扩展 10px，左右边界向外扩展 20px。
• rootMargin: '10px 20px 30px'：将 root 元素的上边界向外扩展 10px，左右边界向外扩展 20px，下边界向外扩展 30px。
• rootMargin: '10px 20px 30px 40px'：将 root 元素的上边界向外扩展 10px，右边界向外扩展 20px，下边界向外扩展 30px，左边界向外扩展 40px。
• rootMargin: '-10px'：将root元素的边界向内缩小10px

注意,rootMargin 的值可以是正值也可以是负值,并且可以使用 px 或 % 作为单位。百分比值是相对于root元素的宽高, 而不是目标元素。

综合示例：图片懒加载

最后，咱们通过一个完整的图片懒加载示例，来演示如何综合运用 root、threshold 和 rootMargin 这三个选项。

<div id="container" style="height: 500px; overflow: auto;">
  <img data-src="image1.jpg" class="lazy-image">
  <img data-src="image2.jpg" class="lazy-image">
  <img data-src="image3.jpg" class="lazy-image">
  <img data-src="image4.jpg" class="lazy-image">
  <img data-src="image5.jpg" class="lazy-image">
</div>

const container = document.getElementById('container');
 
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.dataset.src;
 
      if (src) {
        img.src = src;
        img.removeAttribute('data-src');
      }
 
      observer.unobserve(img);
    }
  });
}, {
  root: container, // 以容器作为根元素
  rootMargin: '100px', // 提前 100px 加载
  threshold: 0 // 刚进入容器就加载
});
 
const lazyImages = document.querySelectorAll('.lazy-image');
lazyImages.forEach(image => {
  observer.observe(image);
});

在这个示例中，咱们：

1. 将 #container 设置为 root，这样只有当图片进入 #container 的可视区域时才会被加载。
2. 将 rootMargin 设置为 '100px'，这样图片在进入 #container 可视区域之前 100px 就会被加载，从而实现预加载的效果。
3. 将 threshold 设置为 0，这样图片刚进入 #container 可视区域就会被加载。
4. 在回调函数中，将图片的 data-src 属性值赋给 src 属性，从而实现图片的加载。加载完成后移除data-src属性，避免重复加载，同时停止对该图片的观察。

通过这个示例，你可以看到 Intersection Observer API 的强大之处。它不仅简化了代码，提高了性能，还提供了灵活的配置选项，可以满足各种各样的需求。以后再遇到类似的需求，你就可以告别“滚动监听”，拥抱 Intersection Observer API 了！

当然，Intersection Observer API 还有一些其他的用法和注意事项，比如：

• 可以同时观察多个目标元素。
• 可以在回调函数中获取到更多关于目标元素的信息，比如 boundingClientRect、intersectionRatio 等。
• 可以处理不可见元素，比如 display: none 的元素，它们不会触发回调函数。
• 兼容性: 目前, 主流的现代浏览器都已经支持 Intersection Observer API, 对于不支持的浏览器, 可以考虑引入 polyfill。

这些内容就留给你自己去探索了。希望这篇文章能够帮助你更好地理解和使用 Intersection Observer API！如果你有任何问题或想法，欢迎在评论区留言讨论。