Skip to main content

IntersectionObserverEntry 🧪

预览版 🧪

此 API 目前仅在 React Native 的 Canary 和 Experimental 渠道中可用。

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

如果你想尝试，请在你的应用中使用 启用 Canary 版本通道。

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

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

¥The IntersectionObserverEntry interface, as defined in Web specifications. It describes the intersection between the target element and its root container at a specific moment of transition.

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

¥Instances of IntersectionObserverEntry are delivered to an IntersectionObserver callback in its entries parameter.

参考

¥Reference

实例属性​

¥Instance properties

boundingClientRect​

参见 MDN 中的文档。

¥See documentation in MDN.

返回目标元素的边界矩形，并将其作为 DOMRectReadOnly 对象返回。

¥Returns the bounds rectangle of the target element as a DOMRectReadOnly.

intersectionRatio​

参见 MDN 中的文档。

¥See documentation in MDN.

返回 intersectionRect 与 boundingClientRect 的比率。

¥Returns the ratio of the intersectionRect to the boundingClientRect.

intersectionRect​

参见 MDN 中的文档。

¥See documentation in MDN.

返回一个 DOMRectReadOnly 对象，表示目标的可见区域。

¥Returns a DOMRectReadOnly representing the target's visible area.

isIntersecting​

参见 MDN 中的文档。

¥See documentation in MDN.

一个布尔值，如果目标元素与交叉监视器的根节点相交，则该值为 true。如果此值为 true，则 IntersectionObserverEntry 表示过渡到相交状态。如果是 false，则表示从相交到不相交的转变。

¥A Boolean value which is true if the target element intersects with the intersection observer's root. If this is true, then the IntersectionObserverEntry describes a transition into a state of intersection; if it's false, then you know the transition is from intersecting to not-intersecting.

rnRootIntersectionRatio ⚠️​

非标准

这是 React Native 特有的扩展。

¥This is a React Native specific extension.

返回 intersectionRect 与 rootBounds 的比率。

¥Returns the ratio of the intersectionRect to the rootBounds.

ts
get rnRootIntersectionRatio(): number;

此功能类似于 intersectionRatio，但计算时是相对于根元素的边界框，而不是目标元素的边界框。此功能对应于 rnRootThreshold 选项，允许你确定目标元素覆盖根区域的百分比。

¥This is analogous to intersectionRatio, but computed relative to the root's bounding box instead of the target's bounding box. This corresponds to the rnRootThreshold option and allows you to determine what percentage of the root area is covered by the target element.

rootBounds​

参见 MDN 中的文档。

¥See documentation in MDN.

返回交叉监视器根节点的 DOMRectReadOnly。

¥Returns a DOMRectReadOnly for the intersection observer's root.

target​

参见 MDN 中的文档。

¥See documentation in MDN.

与根节点交集发生变化的 Element。

¥The Element whose intersection with the root changed.

time​

参见 MDN 中的文档。

¥See documentation in MDN.

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

¥A DOMHighResTimeStamp indicating the time at which the intersection was recorded, relative to the IntersectionObserver's time origin.