title: IntersectionObserver
sidebar_label: IntersectionObserver
An IntersectionObserver
object that infers whether and how likely certain nodes are visible to users.
Methods
disconnect
Stops listening, and the callback function will no longer be triggered.
() => void
observe
Specifies the target node and starts listening on changes in the intersection status.
(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.
(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.
(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 |