Intersection Observer 是浏览器提供的一个用于异步监听目标元素与其祖先元素（或视窗 viewport）交叉状态变化的 API，常用于懒加载、元素进入/离开可视区域的检测、统计曝光、实现“无限滚动”等场景。

基本用法

// 1. 创建一个回调函数
function onIntersection(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("元素进入可视区:", entry.target);
      // 比如加载图片、触发动画、上报曝光…
      observer.unobserve(entry.target); // 如果只需要一次，可以取消监听
    }
  });
}

IntersectionObserverEntry 重要字段

// 2. 实例化 IntersectionObserver
const observer = new IntersectionObserver(onIntersection, {
  root: null,                  // 默认为 null (viewport)
  rootMargin: '0px 0px 0px 0px',
  threshold: 0.25              // 目标至少有 25% 可见时触发
});

// 3. 开始监听：传入一个或多个目标元素
const imgs = document.querySelectorAll('img[data-src]');
imgs.forEach(img => observer.observe(img));

• 根元素（root）

  指定用于比对交叉状态的容器，默认是浏览器视窗 viewport；也可以指定某个滚动容器元素。

• 根元素的外边距（rootMargin）

  用于扩展或缩小根元素的边界，格式同 CSS margin，如 "0px 0px -100px 0px"。

• 阈值（threshold）

  一个 0~1 之间的数字或数字数组，表示目标元素与根相交面积比例达到该值时触发回调。例如 0.5 表示 50%，[0, 0.5, 1] 表示在 0%、50%、100% 三个阶段都会触发。

• 回调（callback）

  每当目标元素的相交状态发生到达阈值的变化时执行，接收两个参数：一个是 IntersectionObserverEntry 数组，另一个是当前的 IntersectionObserver 实例。

停止观察

• observer.unobserve(target)
  • 作用：仅停止对指定 target 元素的监听。
  • 后续可复用：观察者本身仍然保持“活跃”状态，仍可以继续对其他元素（或之后重新传入的同一元素）调用 .observe(...)。
  • 典型场景：你想有选择地移除某些元素，但还要继续用同一个 IntersectionObserver 去监听别的目标。
• observer.disconnect()
  • 作用：停止对所有已注册目标的监听，一次性清空内部的目标列表，并释放 observer 实例。
  • 后续可复用：观察者停止后，如果要再次监听任何元素，仍可直接调用 .observe(...)，但在调用前它不再对任何元素发出回调。
  • 典型场景：不再需要再用到这个观察者了，或者在组件卸载／页面切换时统一销毁。