IntersectionObserver：observe() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

IntersectionObserver 的 observe() 方法向 IntersectionObserver 对象观察的目标集合添加一个元素。一个观察者有一组阈值和一个根（root），但是可以监视多个目标元素的可见性变化（遵循阈值和根的设置）。

调用 IntersectionObserver.unobserve() 方法可以停止观察元素。

当指定元素的可见区域超过观察者的可见区域阈值（在 IntersectionObserver.thresholds 中列出）之一时，观察者的回调会被执行并传入代表当前发生的交叉变化的 IntersectionObserverEntry 对象数组。请注意，这种设计允许通过一次回调调用来处理多个元素的交叉变化。

备注： 观察器的回调总是会在调用 observe() 后的第一个渲染周期中触发，即使观察的元素相对于视口尚未移动。这意味着，例如，当在视口之外的元素上调用 observe() 时，回调将立即被调用且至少会有一个 intersecting 被设置为 false 的条目。在视口内的元素将导致回调立即被调用且至少有一个 intersecting 被设置为 true 的条目。

语法

observe(targetElement)

参数

targetElement: 要监视其在根范围内的可见性的元素。此元素必须是根元素的后代（或者如果根是文档的视口，则该元素必须被包含在当前文档中）。

返回值

无（undefined）。

示例

// 注册 IntersectionObserver
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // 如果观察目标在视口内，则添加“active”类
      entry.target.classList.add("active");
    } else {
      // 否则移除“active”类
      entry.target.classList.remove("active");
    }
  });
});

// 声明观察的内容，并观察其属性。
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});

规范

Specification
Intersection Observer # dom-intersectionobserver-observe

浏览器兼容性

BCD tables only load in the browser

参见

IntersectionObserver.unobserve()