前言 🚀
作为前端新手，你是否也遇到过这些困惑：想实现图片懒加载却怕写滚动监听卡顿，想优化页面性能却无从下手？
在过去，实现“元素是否进入视口”的判断，往往需要写一堆 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，无需引入第三方库，轻量化。
局限性：
-
无法监听元素内部的滚动，只能监听元素与根元素的交叉状态；
-
回调函数是异步的，无法在回调中同步获取元素的最新位置；
-
不支持IE浏览器
兼容性：
五、总结
看完本文，你已经掌握了 IntersectionObserver 的核心用法，总结3个要点，帮你快速巩固：
1. 核心作用：监听元素与视口（或祖先元素）的交叉状态，异步触发回调；
2. 用法步骤：创建观察器 → 监听目标元素 → 处理回调（核心判断 isIntersecting）；
3. 实战价值：4个高频场景 懒加载、滚动动画、无限滚动、埋点。
