IntersectionObserver

title: IntersectionObserver

sidebar_label: 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

relativeTo

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

Reference

(selector: string, margins?: RelativeToMargins) => IntersectionObserver

relativeToViewport

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

Reference

(margins?: RelativeToViewportMargins) => IntersectionObserver

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

ObserveCallbackResult

RelativeRectResult

参照区域的边界

IntersectionRectResult

相交区域的边界

BoundingClientRectResult

RelativeToMargins

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

RelativeToViewportMargins

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