IntersectionObserver API 与阈值
创建观察器并配置可见性阈值
IntersectionObserver API 与阈值 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
IntersectionObserver 的作用
IntersectionObserver 会在元素进入或离开视口（或其他滚动容器）时触发回调。它是现代且高效的滚动监听器替代方案——由浏览器完成计算，您的代码只需在实际的可见性变化时运行。
创建
new IntersectionObserver(callback, options) 会创建一个观察器。当交叉状态发生变化时，回调会接收一个条目数组；选项用于控制要观察的容器以及触发所需的阈值。
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));IntersectionObserverEntry
每个 entry 都有 target（被观察的元素）、isIntersecting（布尔值）、intersectionRatio（0 到 1）、boundingClientRect、intersectionRect 和 time。请使用 isIntersecting 进行二值可见性检查，使用 intersectionRatio 处理按可见百分比计算的逻辑。
阈值选项
{ threshold: 0.5 } 会在交叉比例跨过 50% 时触发回调。使用数组 [0, 0.25, 0.5, 0.75, 1] 可以在每四分之一处触发，这对于构建进度指示器或报告“可见百分比”的分析功能很有用。
根选项
默认情况下，观察器会测量元素与视口的交叉情况。设置 root: someScrollableDiv 可以改为以内部滚动容器为基准进行测量，例如固定高度 div 内的虚拟化列表。
rootMargin 选项
rootMargin: "200px" 会将观察区域的每一侧扩大 200 像素。您可以利用它提前触发操作（在图片进入视口前 200 像素就开始加载），也可以延后触发（只有元素完全越过视口后才触发）。
new IntersectionObserver(callback, {
rootMargin: "0px 0px 200px 0px",
threshold: 0
});observe 和 unobserve
observer.observe(element) 开始观察元素；observer.unobserve(element) 停止观察。当不再需要回调时，请务必取消观察（例如延迟加载只触发一次之后），以释放内存。
断开观察
observer.disconnect() 会停止观察所有已观察的元素。当组件卸载或不再需要观察器时调用它，可以防止观察器的生命周期超出使用场景而造成内存泄漏。
异步传递
回调会以异步方式传递，并且会进行批处理——快速滚动期间发生许多交叉变化时，会通过一次回调传递所有条目，而不是每个元素触发一次。这相比每次滚动事件都触发的滚动监听器，性能优势非常明显。
初始回调会立即触发
观察新元素时，回调几乎会立即触发一次，并提供元素的当前状态。这对于处理开始观察时已经可见的元素很有用，无需编写特殊的初始化流程。
常见使用场景
延迟加载图片、在元素滚动进入视口时触发动画、无限滚动（观察列表末尾附近的 sentinel）、跟踪用户实际阅读过的文章，以及根据主视觉区域的可见性切换粘性页眉。
知识检查
在 IntersectionObserver 中，阈值为 0 与阈值为 1 有什么区别？
总结
IntersectionObserver 会在元素可见性变化时触发回调，并内置性能优化和批处理机制——对于可见性逻辑，应使用它替代滚动监听器。请通过阈值（0 到 1 或数组）、根（自定义滚动容器）和 rootMargin（扩大或缩小观察区域）进行配置。使用 observe/unobserve 管理指定元素，断开观察则会清理所有内容。
常见问题解答
「IntersectionObserver API 与阈值」课时是免费的吗？
是的 — 「IntersectionObserver API 与阈值」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「IntersectionObserver API 与阈值」这节课中我会学到什么？
创建观察器并配置可见性阈值 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「IntersectionObserver API 与阈值」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- IntersectionObserver API 与阈值
- 使用 IntersectionObserver 延迟加载
- 实现无限滚动
- 设置滚动关联动画