前言 🚀

作为前端新手，你是否也遇到过这些困惑：想实现图片懒加载却怕写滚动监听卡顿，想优化页面性能却无从下手？

在过去，实现“元素是否进入视口”的判断，往往需要写一堆 scroll 监听、计算偏移量，还要手动加防抖节流优化，代码繁琐又容易踩坑。

而今天要讲的 IntersectionObserver API，就是浏览器为我们准备的“性能神器”——它能自动监听元素与视口的交叉状态，无需手动计算，性能拉满，用法还简单容易上手！

一、IntersectionObserver 的概念

一句话总结： IntersectionObserver 是浏览器原生提供的API，用于异步监听目标元素与视口（或指定祖先元素）的交叉状态。当元素进入/离开视口、交叉比例变化时，会自动触发我们定义的回调函数。

用一张图看懂它的工作逻辑：

• 根元素（root）：默认是视口，也可以指定某个祖先元素作为“观察范围”；
• 目标元素（target）：我们需要监听的元素（可以同时监听多个）；
• 交叉区域（intersection area）：目标元素与根元素重叠的部分；
• 回调触发：当交叉区域的比例达到我们设定的“阈值”时，就会执行回调函数。

二、API语法详解

IntersectionObserver 的用法非常简洁，核心就3步：创建观察器 → 监听目标元素 → 处理回调逻辑。

核心语法

// 1. 创建 IntersectionObserver 实例
const observer = new IntersectionObserver(callback, options);

// 2. 监听目标元素
observer.observe(targetElement1);
observer.observe(targetElement2);

// 3. 停止监听（可选，避免内存泄漏）
observer.unobserve(targetElement); // 停止监听单个元素
observer.disconnect(); // 停止所有监听

参数详解

参数1：callback

交叉状态变化时的回调函数，当目标元素的交叉状态发生变化时（进入/离开视口、交叉比例达标），会自动执行这个函数，它接收两个参数：

• entries：IntersectionObserverEntry 数组，每个成员对应一个被监听元素的交叉信息（最常用 isIntersecting 和 intersectionRatio）；

• observer：当前的 IntersectionObserver 实例，可用于停止监听等操作。

回调函数示例：

const callback = (entries, observer) => {
  // 遍历所有被监听的元素
  entries.forEach(entry => {
    // 核心判断：元素是否进入视口
    if (entry.isIntersecting) {
      console.log("元素进入视口！", entry.target);
      // 执行操作：加载图片、触发动画等
      // 操作完成后，可停止监听该元素，避免重复触发
      observer.unobserve(entry.target);
    } else {
      console.log("元素离开视口！", entry.target);
    }
  });
};

参数2：options（可选）

配置对象，用于自定义观察规则，常见3个属性：

属性	说明	默认值	示例
root	观察的根元素（祖先元素）	null（即视口）	root: document.querySelector('.container')
rootMargin	根元素的边距，用于扩大/缩小观察范围	"0px 0px 0px 0px"	rootMargin: "100px 0px"（提前100px开始监听）
threshold	触发回调的交叉比例阈值（0~1，可传数组），0表示元素刚进入视口就触发，1表示完全进入才触发	[0]	threshold: [0, 0.5, 1]（元素进入0%、50%、100%时都触发）

实例方法

observe(target)：开始监听目标元素

unobserve(target)：停止监听指定目标元素，避免重复触发，优化性能

disconnect()：停止所有监听，页面销毁时用，避免内存泄漏

takeRecords()：返回所有被监听元素的交叉信息（了解）

三、高频应用场景

场景一：图片懒加载

核心逻辑： 页面初始化时，图片不加载真实地址，只存储在 data-src 中；当图片进入视口时，再将 data-src 赋值给 src，实现延迟加载。

示例代码：

<img class="lazy" data-src="image1.jpg" alt="懒加载图片">
<img class="lazy" data-src="image2.jpg" alt="懒加载图片">
<img class="lazy" data-src="image3.jpg" alt="懒加载图片">

<script>
  // 创建观察器
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // 加载真实图片
        observer.unobserve(img);   // 停止监听
      }
    });
  });

  // 监听所有图片
  document.querySelectorAll('.lazy').forEach(img => {
    observer.observe(img);
  });
</script>

效果： 减少初始页面的网络请求，提升页面加载速度，尤其适合图片较多的页面（如商品列表、博客页面）。

场景二：滚动动画

核心逻辑： 元素进入视口时，触发动画（如渐显、平移）；离开视口时可重置动画，让页面滚动更有层次感。

示例代码：

<div class="animate-box">我会滚动渐入</div>
<div class="animate-box">我会滚动渐入</div>
<div class="animate-box">我会滚动渐入</div>

<style>
  .animate-box {
    height: 100vh;
    opacity: 0;
    transform: translateY(100px);
    transition: 0.6s ease;
  }
  .animate-box.show {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<script>
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      } else {
        entry.target.classList.remove('show');
      }
    });
  });

  document.querySelectorAll('.animate-box').forEach(el => {
    observer.observe(el);
  });
</script>

效果： 替代传统的 scroll 监听动画，性能更优，动画触发更精准。

场景三：无限滚动

核心逻辑： 在列表底部添加一个“加载占位符”，监听该占位符；当占位符进入视口时，触发数据加载，加载完成后更新列表，实现“无限滚动”。

示例代码：

<div id="list"></div>
<div id="load-more">加载中...</div>

<script>
  const list = document.getElementById('list');
  const loadMore = document.getElementById('load-more');
  let page = 1;

  // 模拟加载数据
  function loadData() {
    for (let i = 0; i < 10; i++) {
      const item = document.createElement('div');
      item.textContent = `列表项 ${page * 10 + i}`;
      list.appendChild(item);
    }
    page++;
  }

  // 监听底部占位符
  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
      loadData();
    }
  });

  observer.observe(loadMore);
  loadData(); // 首次加载
</script>

效果： 替代分页按钮，提升用户体验，用于加载更多数据，常见于社交媒体、新闻APP的前端页面。

场景四：有效曝光埋点

核心逻辑： 监听页面中的关键元素（如广告、卡片），当元素完全进入视口（交叉比例≥1）时，记录曝光数据（如上报接口），用于数据分析、广告计费等。

示例代码：

// 曝光去重 (IntersectionObserver)
const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const target = entry.target as HTMLElement
          const workId = target.dataset.workId
          if (workId) {
            tracker.track('work_show', {
                page_name: document.title,
                work_id: workId
            })
            observer.unobserve(target) // 曝光后取消观察，实现去重
          }
        }
      })
    },
    { threshold: 0.5 }
)

效果： 替代分页按钮，提升用户体验，用于加载更多数据，常见于社交媒体、新闻APP的前端页面。

四、优势、局限性与兼容性

优势：

性能优异：异步执行，不阻塞主线程，避免传统 scroll 监听的频繁计算导致的卡顿；

用法简洁：无需手动计算元素位置、偏移量，浏览器自动处理交叉状态，代码量大幅减少；

多场景适配：懒加载、滚动动画、无限滚动、埋点等场景都能覆盖，实用性强；

原生支持：浏览器原生API，无需引入第三方库，轻量化。

局限性：

1. 无法监听元素内部的滚动，只能监听元素与根元素的交叉状态；

2. 回调函数是异步的，无法在回调中同步获取元素的最新位置；

3. 不支持IE浏览器

兼容性：

五、总结

看完本文，你已经掌握了 IntersectionObserver 的核心用法，总结3个要点，帮你快速巩固：

1. 核心作用：监听元素与视口（或祖先元素）的交叉状态，异步触发回调；

2. 用法步骤：创建观察器 → 监听目标元素 → 处理回调（核心判断 isIntersecting）；

3. 实战价值：4个高频场景 懒加载、滚动动画、无限滚动、埋点。