Skip to main content
Version: 3.x

IntersectionObserver

An IntersectionObserver object that infers whether and how likely certain nodes are visible to users.

Reference

Methods

disconnect

Stops listening, and the callback function will no longer be triggered.

Reference

() => void

observe

Specifies the target node and starts listening on changes in the intersection status.

Reference

(targetSelector: string, callback: ObserveCallback) => void
PropertyTypeDescription
targetSelectorstringSelector
callbackObserveCallbackThe callback function for listening on intersection status changes.

relativeTo

Uses a selector to specify a node as one of the reference areas.

Reference

(selector: string, margins?: RelativeToMargins) => IntersectionObserver
PropertyTypeDescription
selectorstringSelector
marginsRelativeToMarginsExpands/Contracts the border of the layout area of the reference node.

relativeToViewport

Specifies the page display area as one of the reference areas.

Reference

(margins?: RelativeToViewportMargins) => IntersectionObserver
PropertyTypeDescription
marginsRelativeToViewportMarginsExpands/Contracts the border of the layout area of the reference node.

Sample Code

In the code sample below, the callback function is triggered if the target node (specified by the selector .target-class) enters the area 100 px below the display area.

Taro.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
res.intersectionRatio // The percentage of the intersection area in the layout area of the target node
res.intersectionRect // Intersection area
res.intersectionRect.left // Left boundary coordinates of the intersection area
res.intersectionRect.top // Upper boundary coordinates of the intersection area
res.intersectionRect.width // Width of the intersection area
res.intersectionRect.height // Height of the intersection area
})

Parameters

ObserveCallback

The callback function for listening on intersection status changes.

(result: ObserveCallbackResult) => void
PropertyType
resultObserveCallbackResult

ObserveCallbackResult

PropertyTypeDescription
boundingClientRectBoundingClientRectResultThe target border
intersectionRationumberIntersection ratio
intersectionRectIntersectionRectResultThe border of the intersection area
relativeRectRelativeRectResultThe border of the reference area
timenumberThe timestamp for intersection detection

RelativeRectResult

参照区域的边界

PropertyTypeDescription
bottomnumberLower border of the node layout area
leftnumberLeft border of the node layout area
rightnumberRight border of the node layout area
topnumberUpper border of the node layout area

IntersectionRectResult

相交区域的边界

PropertyTypeDescription
bottomnumberLower border
leftnumberLeft border
rightnumberRight border
topnumberUpper border
heightnumberHeight
widthnumberWidth

BoundingClientRectResult

PropertyTypeDescription
bottomnumberLower border
leftnumberLeft border
rightnumberRight border
topnumberUpper border
heightnumberHeight
widthnumberWidth

RelativeToMargins

Expands/Contracts the border of the layout area of the reference node.

PropertyTypeRequiredDescription
bottomnumberNoLower border of the node layout area
leftnumberNoLeft border of the node layout area
rightnumberNoRight border of the node layout area
topnumberNoUpper border of the node layout area

RelativeToViewportMargins

Expands/Contracts the border of the layout area of the reference node.

PropertyTypeRequiredDescription
bottomnumberNoLower border of the node layout area
leftnumberNoLeft border of the node layout area
rightnumberNoRight border of the node layout area
topnumberNoUpper border of the node layout area