JavaScript Academy · 课时

观察元素可见性

Q: 「观察元素可见性」这节课中我会学到什么？

创建观察器并监视元素。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建观察器并监视元素。

观察元素可见性 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么使用交叉观察器

传统上，要检测元素何时进入视口，需要监听 scroll 并持续调用 getBoundingClientRect，这会导致速度变慢和页面卡顿。

交叉观察器 API 可以高效、异步地监视可见性，并在主线程之外运行。

创建观察器

您可以使用 new IntersectionObserver(callback) 创建观察器。每当被观察元素的可见性跨过某个阈值时，就会运行该回调函数。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

观察元素

调用 observer.observe(element) 开始观察目标。一个观察器可以观察多个元素。

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

isIntersecting 标志

每个条目都有一个布尔值 isIntersecting，用于告诉您目标当前是否与根（默认为视口）重叠。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

条目详细信息

每个 IntersectionObserverEntry 都包含有用的数据：

target — 被观察的元素
isIntersecting — 是否与根相交
intersectionRatio — 可见部分的比例（0 到 1）
boundingClientRect — 目标的矩形区域

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

threshold 选项

threshold 选项控制回调在何种可见比例下触发。0 表示只要有一个像素可见就触发；1 表示只有完全可见时才触发。

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

root 选项

默认情况下，observer 会以浏览器视口为参照进行测量。将 root 设置为可滚动的祖先元素后，observer 会改为测量元素在该容器中的可见性。

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

rootMargin 选项

rootMargin 会扩大或缩小 root 的边界框，效果类似 CSS 外边距。正值会让回调更早触发（元素实际出现在屏幕上之前）。

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

停止观察

调用 observer.unobserve(element) 可以停止观察一个元素，调用 observer.disconnect() 可以停止观察所有元素。这对于清理资源和实现一次性触发非常重要。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

高效的原因

浏览器会在内部计算相交情况并批量发送通知，而不是在每个滚动帧都运行您的 JavaScript。这样可以避免布局反复计算，即使目标很多，也能保持滚动流畅。

常见使用场景

Intersection Observer 可用于实现许多实际功能：

延迟加载图片和 iframe
无限滚动
滚动触发的动画
跟踪广告或内容的展示次数

接下来我们将实现其中的几个功能。

快速检查

测试您对 Intersection Observer 基础知识的理解。

回顾

您学会了 Intersection Observer 的基础知识：

new IntersectionObserver(callback, options) 用于创建一个 observer。
observe 开始观察；unobserve/disconnect 停止观察。
每个条目都会提供 isIntersecting 和 intersectionRatio。
threshold、root 和 rootMargin 用于调整触发时机。
它的效率远高于滚动监听器。

接下来，我们将使用它延迟加载图片。

常见问题解答

「观察元素可见性」课时是免费的吗？

是的 — 「观察元素可见性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「观察元素可见性」这节课中我会学到什么？

创建观察器并监视元素。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「观察元素可见性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy