跳到主要内容

IntersectionObserver 🧪

金丝雀版 🧪

此 API 目前仅在 React Native 的金丝雀版和实验性渠道中可用。

如果您想尝试，请在您的应用中 启用 Canary Channel。

Web 规范中定义的全局 IntersectionObserver 接口。它提供了一种异步观察目标元素与祖先元素或顶级文档的视口交叉变化的方法。

参考

构造函数​

IntersectionObserver()​

请参阅 MDN 文档。

创建一个新的 IntersectionObserver 对象，当它检测到目标元素的可见性穿过一个或多个 threshold 或 rnRootThreshold 值时，将执行指定的 callback 函数。

ts
new IntersectionObserver(callback, options?)

参数​

callback

当目标元素的可见百分比穿过阈值时调用的函数。callback 接收两个参数：

  • entries：一个 IntersectionObserverEntry 对象数组，每个对象代表一个被穿过的阈值，该阈值表示元素变得比该阈值指定的百分比更可见或更不可见。
  • observer：调用 callback 的 IntersectionObserver 实例。

options (可选)

一个可选对象，具有以下属性：

姓名类型描述
rootElement | null目标元素的祖先元素，其边界矩形将被视为视口。如果未指定或为 null，则默认为根视口。
rootMargin字符串一个字符串，指定在计算交叉时要添加到根边界框的一组偏移量。默认为 "0px 0px 0px 0px"。
thresholdnumber | number[]可以是单个数字或 0.0 和 1.0 之间的数字数组，指定观察到的目标的交叉区域与总边界框面积的比例。如果未设置 rnRootThreshold，则默认为 [0]。
rnRootThreshold ⚠️number | number[]React Native 特有。 可以是单个数字或 0.0 和 1.0 之间的数字数组，指定交叉区域与根视图总面积的比例。

实例属性​

root​

请参阅 MDN 文档。

在测试交叉时，用于边界矩形的元素或文档。

rootMargin​

请参阅 MDN 文档。

在计算交叉时应用于根边界框的偏移矩形。

rnRootThresholds ⚠️​

非标准

这是 React Native 特有的扩展。

根阈值列表，按数字递增排序，其中每个阈值是指定的根视图的边界框面积与交叉区域的比例，根视图默认为视口。

当目标元素的 rnRootThresholds 或 thresholds 中指定的任何阈值被穿过时，会生成该目标的通知。

ts
get rnRootThresholds(): ReadonlyArray<number> | null;

thresholds​

请参阅 MDN 文档。

阈值列表，按数字递增排序，其中每个阈值是观察到的目标的交叉区域与边界框面积的比例。

当目标元素的 rnRootThresholds 或 thresholds 中指定的任何阈值被穿过时，会生成该目标的通知。

实例方法​

disconnect()​

请参阅 MDN 文档。

停止 IntersectionObserver 对象观察任何目标。

observe()​

请参阅 MDN 文档。

告诉 IntersectionObserver 开始观察一个目标元素。

takeRecords()​

请参阅 MDN 文档。

返回一个 IntersectionObserverEntry 对象数组，包含所有被观察的目标。

unobserve()​

请参阅 MDN 文档。

告诉 IntersectionObserver 停止观察特定的目标元素。