IntersectionObserver

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

参考文档

方法

disconnect

停止监听。回调函数将不再触发

参考文档

() => void

observe

指定目标节点并开始监听相交状态变化情况

参考文档

(targetSelector: string, callback: ObserveCallback) => void

relativeTo

使用选择器指定一个节点，作为参照区域之一。

参考文档

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

relativeToViewport

指定页面显示区域作为参照区域之一

参考文档

(margins?: RelativeToViewportMargins) => IntersectionObserver

示例代码

下面的示例代码中，如果目标节点（用选择器 .target-class 指定）进入显示区域以下 100px 时，就会触发回调函数。

Taro.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
  res.intersectionRatio // 相交区域占目标节点的布局区域的比例
  res.intersectionRect // 相交区域
  res.intersectionRect.left // 相交区域的左边界坐标
  res.intersectionRect.top // 相交区域的上边界坐标
  res.intersectionRect.width // 相交区域的宽度
  res.intersectionRect.height // 相交区域的高度
})

参数

ObserveCallback

监听相交状态变化的回调函数

(result: ObserveCallbackResult) => void

ObserveCallbackResult

RelativeRectResult

参照区域的边界

IntersectionRectResult

相交区域的边界

BoundingClientRectResult

目标边界

RelativeToMargins

用来扩展（或收缩）参照节点布局区域的边界

RelativeToViewportMargins

用来扩展（或收缩）参照节点布局区域的边界