在前端开发中，我们经常需要监听元素是否出现在视口中，比如懒加载图片、无限滚动加载内容、触发动画等。传统的 scroll 事件虽然可以实现这些功能，但性能较差，容易引发性能问题。好在，现代浏览器提供了 IntersectionObserver API，让我们能够更高效地监听元素的可见性变化。

1. 什么是 IntersectionObserver？

IntersectionObserver 是浏览器提供的 API，用于监听目标元素是否进入或离开可视区域（视口）或某个指定的父容器。它的特点是：

✅ 高效：相比 scroll 事件，它不会频繁触发，提高性能。
✅ 易用：不需要手动计算 getBoundingClientRect()。
✅ 灵活：可以自定义监听范围（root）、触发阈值（threshold）、提前触发（rootMargin）。

2. 为什么需要IntersectionObserver？

在传统·Web·开发中，我们通常通过以下方式检测元素可见性：

• 监听·scroll·事件
• 在事件处理程序中调用getBoundingClientRect()
• 手动计算元素位置

这种方法存在明显缺陷：

• 频繁触发scroll事件导致性能问题
• 强制同步布局（layout thrashing）
• 代码复杂难以维护

IntersectionObserver应运而生，它通过浏览器原生支持的方式，优雅地解决了这些问题。

3. 基本用法

创建观察器

const observer = new IntersectionObserver(callback, options);

• callback(entries, observer)：当元素的可见性变化时触发的回调函数。
• options（可选）：配置监听行为，例如监听范围、阈值等。

监听目标元素

observer.observe(targetElement);

停止监听

observer.unobserve(targetElement); // 单个元素停止监听
observer.disconnect(); // 停止监听所有元素

4. options 配置参数

参数	说明	默认值
root	监听的可视区域（默认是 null，即视口）	null
rootMargin	观察范围的外边距，可提前触发	0px
threshold	触发回调的阈值（0~1，表示可见比例）	0

示例：提前100px触发

const observer = new IntersectionObserver(callback, {
  rootMargin: "100px" // 目标元素进入视口前 100px 就触发
});

示例：不同可见比例触发

const observer = new IntersectionObserver(callback, {
  threshold: [0, 0.5, 1] // 0%、50%、100% 可见时触发
});

5. 监听回调参数

回调 callback(entries, observer) 里的 entries 是一组 IntersectionObserverEntry，包含以下属性：

属性	说明
isIntersecting	true：元素进入视口，false：元素离开
intersectionRatio	目标元素的可见部分比例（0~1）
boundingClientRect	目标元素的 DOMRect 信息
rootBounds	root 视口的 DOMRect 信息

1. 示例：监听可见性变化

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    console.log(entry.isIntersecting ? "元素进入视口" : "元素离开视口");
  });
});

6. 典型应用场景

6.1. 懒加载图片

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // 加载后停止监听
    }
  });
}, { rootMargin: "100px" });

images.forEach(img => observer.observe(img));

提前100px触发，避免滚动到图片时才加载，导致闪烁。

6.2. 无限滚动加载

const sentinel = document.querySelector('#load-more');
const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    loadMoreItems(); // 触发数据加载
  }
}, { rootMargin: "50px" });

observer.observe(sentinel);

滚动到#load-more触发加载数据。

6.3. 触发动画

const elements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
});

elements.forEach(el => observer.observe(el));

• css

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

元素进入视口时触发动画。

6.4. 统计广告曝光

const adElement = document.querySelector('.ad');
const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    sendAnalytics('Ad viewed'); // 统计曝光
    observer.unobserve(adElement);
  }
});

observer.observe(adElement);

广告进入视口时，发送统计数据。

7. IntersectionObserver vs scroll 事件

对比项	IntersectionObserver	scroll 事件
性能	高效（仅在变化时触发）	低（滚动时频繁触发）
API 易用性	简单	需要手动计算
兼容性	现代浏览器	兼容性更广

8. 兼容性 & Polyfill

• ✅ IntersectionObserver 适用于 Chrome, Firefox, Edge, Safari。
• ❌ IE 不支持，可以使用 polyfill

9. 总结

IntersectionObserver 是前端开发中必备的 API，能大幅提高性能，适用于 懒加载、无限滚动、动画触发、广告曝光等 场景。

如果你的项目还在用scroll事件监听滚动，赶紧试试 IntersectionObserver 吧！ 🚀

原文地址：https://blog.csdn.net/u012446963/article/details/146909847