Intersection Observer API 进阶：玩转 rootMargin 与 threshold

你好，今天咱们来聊聊 Intersection Observer API 的高级用法，特别是 rootMargin 和 threshold 这两个属性，看看如何巧妙地组合使用它们，实现更精细、更强大的滚动交互控制。

你是不是已经对 Intersection Observer API 的基本用法了如指掌了？比如，用它来实现图片的懒加载、无限滚动列表、元素的曝光统计等等。但是，你真的完全掌握了它的精髓吗？rootMargin 和 threshold 这两个配置项，就像是 Intersection Observer 的“隐藏关卡”，一旦掌握，就能解锁更多意想不到的可能性。

先来简单回顾一下 Intersection Observer 的基本概念。顾名思义，Intersection Observer 就是用来观察（Observe）目标元素（Target）与视口（Viewport）或者其他指定元素（Root）的交叉（Intersection）状态的。当目标元素进入、离开或者在交叉区域内发生变化时，Intersection Observer 就会触发一个回调函数，我们可以在这个回调函数里执行相应的操作。

const observer = new IntersectionObserver(callback, options);

callback 是回调函数，options 是配置对象，rootMargin 和 threshold 就是 options 对象中的两个重要属性。

深入理解 rootMargin

rootMargin 的作用是扩大或者缩小 root 元素的判定范围。默认情况下，root 元素就是视口（Viewport），rootMargin 的值类似于 CSS 中的 margin 属性，可以设置四个方向的值，例如：

• '10px 20px 30px 40px'：表示 top、right、bottom、left 四个方向的 margin 分别是 10px、20px、30px、40px。
• '10px'：表示四个方向的 margin 都是 10px。
• '10px 20px'：表示 top 和 bottom 的 margin 是 10px，left 和 right 的 margin 是 20px。

rootMargin 可以是正值也可以是负值。正值表示扩大判定范围，负值表示缩小判定范围。

举个例子：

假设有一个图片懒加载的场景，我们希望图片在进入视口之前 100px 就开始加载。这时，就可以设置 rootMargin 为 '100px 0px 0px 0px' 或者更简洁地写成 '100px'：

const options = {
  rootMargin: '100px'
};
 
const observer = new IntersectionObserver(callback, options);
 
// ...

这样，当图片距离视口底部还有 100px 时，Intersection Observer 就会触发回调函数，我们就可以在回调函数里开始加载图片了。这样可以给用户带来更好的体验，避免了图片突然出现的“闪烁”感。

再举一个例子： 实现吸顶效果

假如页面中有一个导航栏, 希望在页面向下滚动, 导航栏即将离开视口顶部时, 将其固定在顶部. 可以通过设置负值的 rootMargin 来实现.

const options = {
  rootMargin: '-50px 0px 0px 0px' // 假设导航栏高度为 50px
  threshold: [0]
};
 
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
      if (!entry.isIntersecting) {
        // 导航栏即将离开视口
        entry.target.classList.add('fixed');
      } else {
          // 导航栏回到视口
          entry.target.classList.remove('fixed');
      }
  });
}, options);
 
observer.observe(document.querySelector('nav'));

设置rootMargin: '-50px 0px 0px 0px'，相当于将视口的顶部向下收缩了50px（导航栏的高度）。当导航栏的底部与收缩后的视口顶部相交时（isIntersecting 为 false），就给导航栏添加 fixed 类名，实现吸顶效果。

深入理解 threshold

threshold 属性用来指定目标元素和 root 元素交叉比例达到多少时，触发回调函数。threshold 的值可以是一个数字，也可以是一个数组。

• threshold: 0：表示目标元素刚进入 root 元素时，就触发回调函数。
• threshold: 1：表示目标元素完全进入 root 元素时，才触发回调函数。
• threshold: [0, 0.25, 0.5, 0.75, 1]：表示目标元素进入 root 元素的 0%、25%、50%、75%、100% 时，分别触发一次回调函数。

举个例子：

假设有一个元素曝光统计的需求，我们希望元素在视口中可见比例达到 50% 时，才算作一次有效曝光。这时，就可以设置 threshold 为 0.5：

const options = {
  threshold: 0.5
};
 
const observer = new IntersectionObserver(callback, options);
 
// ...

这样，当元素在视口中可见比例达到 50% 时，Intersection Observer 就会触发回调函数，我们就可以在回调函数里进行曝光统计了。

再举一个例子： 无限滚动

无限滚动列表，当列表的底部即将进入视口时，就加载更多数据。可以这样实现：

const options = {
  rootMargin: '100px', // 预加载距离
  threshold: 0
};
 
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载更多数据
      loadMoreData();
    }
  });
}, options);
 
observer.observe(document.querySelector('.list-footer')); // 监听列表底部的元素

rootMargin 和 threshold 的组合使用

rootMargin 和 threshold 可以组合使用，实现更精细的控制。例如：

• 图片懒加载，希望图片在进入视口之前 200px 就开始加载，并且只在图片完全进入视口后才触发回调：

const options = {
  rootMargin: '200px', 
  threshold: 1
};

• 元素曝光统计，希望元素在进入视口之前 100px 就开始计算曝光时间，并且在元素离开视口时停止计算曝光时间，同时要求元素可见比例达到 25% 才算有效曝光：

const options = {
  rootMargin: '100px', 
  threshold: [0, 0.25]
};

通过 rootMargin 扩大了计算范围, 通过设置 threshold 数组, 可以分别在进入和离开时执行不同的操作, 也可以在达到 25% 可见比例时进行有效曝光统计.

最佳实践和注意事项

• 性能优化：Intersection Observer API 本身是异步的，不会阻塞主线程。但是，回调函数是在主线程中执行的，所以，在回调函数中不要执行耗时操作，以免造成页面卡顿。
• 兼容性：Intersection Observer API 的兼容性已经很好了，但是，在一些老旧的浏览器中还是需要使用 polyfill。
• 解除观察：当不需要观察某个元素时，记得调用 unobserve 方法解除观察，以免造成内存泄漏。
• 避免频繁触发回调：threshold 设置成数组时，可能会频繁触发回调函数。要注意控制回调函数的执行频率，避免不必要的性能损耗。 可以通过防抖（debounce）或节流（throttle）来优化.
• root 的选择: 默认情况下 root 是视口, 但也可以是任何一个祖先元素. 当 root 不是视口时, rootMargin 是相对于 root 元素计算的.
• 理解 isIntersecting: entry.isIntersecting 表示目标元素是否与 root 元素相交, 即使目标元素只有部分与 root 元素相交, isIntersecting 也为 true. 只有当完全不相交时, 才为 false.
• IntersectionRatio: entry.intersectionRatio 表示目标元素与 root 元素的交叉比例. 这是一个 0 到 1 之间的数字.

总结

Intersection Observer API 是一个非常强大的 API，rootMargin 和 threshold 两个属性的组合使用，可以实现更精细的滚动交互控制。希望通过这篇文章，你对 Intersection Observer API 有了更深入的理解，能够在实际项目中灵活运用它，写出更优雅、更高效的代码。

好了，今天就聊到这里。如果你有什么问题或者想法，欢迎在评论区留言交流。咱们下期再见！