浏览器APIJavaScript_Intersection Observer-js教程-PHP中文网

浏览器APIJavaScript_Intersection Observer

betcha

发布： 2025-11-17 23:20:02

原创

937人浏览过

Intersection Observer 是一种高效监听元素与视口相交状态的 API，常用于懒加载、无限滚动等场景。通过创建观察器实例并设置回调函数，在元素可见比例达到阈值时触发相应操作，相比 scroll 事件性能更优。支持 root、rootMargin 和 threshold 配置，可灵活控制触发条件。实际应用包括图片懒加载、内容曝光统计、视差动画等，需注意及时调用 unobserve 避免重复执行，提升页面性能和用户体验。

浏览器apijavascript_intersection observer

Intersection Observer 是浏览器提供的一种高效 API，用于异步监听目标元素与视口（或其父容器）的相交状态。它常用于实现懒加载图片、无限滚动、内容曝光统计等场景，相比传统的 scroll 事件加 getBoundingClientRect 手动计算，性能更好，代码更简洁。

基本用法

使用 Intersection Observer 的核心是创建一个观察器实例，并传入回调函数。当目标元素与根元素（通常是视口）的交叉比例达到设定阈值时，回调函数就会被触发。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      console.log('元素可见', entry.target);
      // 可以在这里加载图片、触发动画等
      observer.unobserve(entry.target); // 停止观察
    }
  });
}, {
  threshold: 0.1 // 当元素有10%可见时触发
});

// 开始观察某个元素
const target = document.querySelector('.lazy-image');
observer.observe(target);

登录后复制

配置选项详解

在创建 IntersectionObserver 时，可以传入第二个参数配置对象，控制触发条件：

root：指定根元素（用于判断相交的容器），默认为浏览器视口。可设为某个 DOM 元素。
rootMargin：对 root 添加 margin，类似 CSS 的写法，如 '50px 0' 表示提前 50px 触发。
threshold：触发回调的交叉比例，可以是 0 到 1 之间的单个数值或数组。设为 0 表示一像素进入即触发，设为 [0, 0.25, 0.5, 1] 可监听多个阶段。

<code>
const options = {
  root: null,
  rootMargin: '50px 0px',
  threshold: [0, 0.25, 0.5, 0.75, 1]
};

const observer = new IntersectionObserver(callback, options);

登录后复制