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 |