当前位置：首页 > 文章列表 > 文章 > 前端 > 浏览器API：IntersectionObserver详解教程

浏览器API：IntersectionObserver详解教程

2025-12-22 19:12:31 0浏览收藏

基本用法

创建一个 IntersectionObserver 实例，传入回调函数和配置项：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素可见', entry.target);
      // 可以在这里加载图片、触发动画等
    }
  });
}, {
  threshold: 0.1, // 元素10%可见时触发
  rootMargin: '0px' // 可添加外边距，如 '50px'
});

// 开始观察某个元素
observer.observe(document.querySelector('#my-element'));

说明：

entries：是所有被监听元素的状态数组，每个 entry 包含 isIntersecting（是否相交）、intersectionRatio（交叉比例）等信息。
threshold：可以是 0 到 1 的数值或数组，表示触发回调的交叉比例。设为 0 表示一有交集就触发，1 表示完全可见才触发。
root：指定根容器，默认是浏览器视口。也可设为某个 DOM 元素。
rootMargin：类似 CSS margin，可扩大或缩小根容器范围，常用于提前触发加载。

常见应用场景

这个 API 非常实用，以下是几个典型用法：

1. 图片懒加载

页面初始只加载占位图，当图片区域进入视口再加载真实图片：

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将 data-src 赋值给 src
      imgObserver.unobserve(img); // 加载后停止监听
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imgObserver.observe(img);
});

2. 触发进入动画

当某个模块滑入视野时，添加“显示”类名来触发动画：

const animateObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      animateObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.animate').forEach(el => {
  animateObserver.observe(el);
});

3. 监听广告或内容曝光

用于统计用户是否“看到”了某块内容，适合做埋点：

const trackObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      // 内容至少50%可见，上报一次
      ga('send', 'event', 'content', 'view', entry.target.id);
      trackObserver.unobserve(entry.target); // 只上报一次
    }
  });
}, { threshold: 0.5 });