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

Property	Type	Description
targetSelector	string	Selector
callback	ObserveCallback	The 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

Property	Type	Description
selector	string	Selector
margins	RelativeToMargins	Expands/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

Property	Type	Description
margins	RelativeToViewportMargins	Expands/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

Property	Type
result	ObserveCallbackResult

ObserveCallbackResult

Property	Type	Description
boundingClientRect	BoundingClientRectResult	The target border
intersectionRatio	number	Intersection ratio
intersectionRect	IntersectionRectResult	The border of the intersection area
relativeRect	RelativeRectResult	The border of the reference area
time	number	The timestamp for intersection detection

RelativeRectResult

参照区域的边界

Property	Type	Description
bottom	number	Lower border of the node layout area
left	number	Left border of the node layout area
right	number	Right border of the node layout area
top	number	Upper border of the node layout area

IntersectionRectResult

相交区域的边界

Property	Type	Description
bottom	number	Lower border
left	number	Left border
right	number	Right border
top	number	Upper border
height	number	Height
width	number	Width

BoundingClientRectResult

Property	Type	Description
bottom	number	Lower border
left	number	Left border
right	number	Right border
top	number	Upper border
height	number	Height
width	number	Width

RelativeToMargins

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

Property	Type	Required	Description
bottom	number	No	Lower border of the node layout area
left	number	No	Left border of the node layout area
right	number	No	Right border of the node layout area
top	number	No	Upper border of the node layout area

RelativeToViewportMargins

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

Property	Type	Required	Description
bottom	number	No	Lower border of the node layout area
left	number	No	Left border of the node layout area
right	number	No	Right border of the node layout area
top	number	No	Upper border of the node layout area