IntersectionObserver：observe() 方法

基线广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常工作。它自以下时间起在浏览器中可用 2019 年 3 月.

该 IntersectionObserver 方法 observe() 将元素添加到由 IntersectionObserver 监视的目标元素集中。一个观察器具有一组阈值和一个根，但可以监视多个目标元素以根据这些阈值和根的变化进行可见性更改。

要停止观察元素，请调用 IntersectionObserver.unobserve()。

当指定元素的可见性跨越观察者的可见性阈值之一（如 IntersectionObserver.thresholds 中列出）时，观察者的回调将使用表示发生的交叉更改的 IntersectionObserverEntry 对象数组执行。请注意，此设计允许通过对回调的单个调用来处理多个元素的交叉更改。

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

语法

observe(targetElement)

参数

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

返回值

无 (undefined)。

示例

// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // Add 'active' class if observation target is inside viewport
      entry.target.classList.add("active");
    } else {
      // Remove 'active' class otherwise
      entry.target.classList.remove("active");
    }
  });
});

// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});

规范

规范
Intersection Observer # dom-intersectionobserver-observe

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

IntersectionObserver.unobserve()