Intersection Observer 是一种高效监听元素与视口相交状态的 API，常用于懒加载、无限滚动等场景。通过创建观察器实例并设置回调函数，在元素可见比例达到阈值时触发相应操作，相比 scroll 事件性能更优。支持 root、rootMargin 和 threshold 配置，可灵活控制触发条件。实际应用包括图片懒加载、内容曝光统计、视差动画等，需注意及时调用 unobserve 避免重复执行，提升页面性能和用户体验。
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] 可监听多个阶段。
const options = {
root: null,
rootMargin: '50px 0px',
threshold: [0, 0.25, 0.5, 0.75, 1]
};
const observer = new IntersectionObserver(callback, options);
实际应用场景
Intersection Observer 特别适合以下几种常见需求：
立即学习“Java免费学习笔记（深入）”；
- 图片懒加载：页面初始只加载占位图，当图片区域接近视口时再加载真实图片。
- 无限滚动：监听“加载更多”占位元素，当其进入视口时请求下一页数据。
- 内容曝光统计：监听页面中的广告或关键模块，确保其真正被用户看到后再上报展示数据。
- 视差动画触发：当某个模块进入视口时，添加动画类名，实现滚动驱动动画效果。
基本上就这些。掌握 Intersection Observer 能显著提升页面性能和用户体验，避免频繁监听 scroll 造成的卡顿。现代浏览器支持良好，是前端开发中非常实用的工具。不复杂但容易忽略细节，比如记得 unobserve 避免重复触发。基本上就这些。
