跳到主要内容

IntersectionObserverEntry 🧪

金丝雀版 🧪

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

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

Web 规范中定义的 IntersectionObserverEntry 接口。它描述了在特定过渡时刻目标元素与其根容器的交叉情况。

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 的时间原点。