跳到主要内容
Version: Next

IntersectionObserverEntry 🧪

Canary 🧪

This API is currently only available in React Native’s Canary and Experimental channels.

If you want to try it out, please enable the Canary Channel in your app.

IntersectionObserverEntry 接口，遵循 Web 规范定义。它描述了目标元素与其根容器在特定时刻的交叉状态。

IntersectionObserverEntry 的实例通过 IntersectionObserver 回调函数的 entries 参数传递。

参考

实例属性​

boundingClientRect​

参见 MDN 文档。

返回目标元素的边界矩形，类型为 DOMRectReadOnly。

intersectionRatio​

参见 MDN 文档。

返回 intersectionRect 与 boundingClientRect 的面积比值。

intersectionRect​

参见 MDN 文档。

返回表示目标可见区域的 DOMRectReadOnly。

isIntersecting​

参见 MDN 文档。

一个布尔值，当目标元素与交叉观察器的根元素相交时为 true。如果为 true，表示 IntersectionObserverEntry 描述的是进入交叉状态的转换；如果为 false，表示从交叉状态变为非交叉状态。

rnRootIntersectionRatio ⚠️​

非标准

这是 React Native 特有的扩展。

返回 intersectionRect 与 rootBounds 的面积比值。

ts
get rnRootIntersectionRatio(): number;

这与 intersectionRatio 类似，但计算的是相对于根元素边界框的比值，而非目标元素的边界框。这对应于 rnRootThreshold 选项，允许你判断根区域被目标元素覆盖的百分比。

rootBounds​

参见 MDN 文档。

返回交叉观察器根元素的 DOMRectReadOnly。

target​

参见 MDN 文档。

与根元素交叉状态发生变化的 Element。

time​

参见 MDN 文档。

一个 DOMHighResTimeStamp，表示相对于 IntersectionObserver 时间原点的交叉记录时间。