一文详解 Taro / 小程序 IntersectionObserver 参数

只要理解"两个矩形的重叠区域 "这件事，IntersectionObserver 完全不难

IntersectionObserver 的本质是观察 两个区域是否相交，当相交区域产生或变化时，就会触发回调

relativeTo(string selector, Object margins) 参数解析

官方解释：developers.weixin.qq.com/miniprogram...

参数中的 margins 解释不是很详细，个人理解图示如下：

调用方式示例：

observer.relativeToViewport({
  top: -50,
  bottom: 100,
});

正值为向外扩张边界，负值为向内收缩边界。

observe(string targetSelector, function callback) 中的回调函数参数解析

官方解释：developers.weixin.qq.com/miniprogram...

function callback 中的 intersectionRect、boundingClientRect、relativeRect 参数解释：

区域	说明
目标区域 boundingClientRect	你要观察的元素的位置与大小
参照区域 relativeRect	通常是视口（屏幕可见部分），也可以是自定义容器
相交区域 intersectionRect	目标区域与参照区域的重叠部分

每个 rect 中的top/bottom/left/right 参数解释：

首先理解这代表一个坐标，坐标系知识（理解 top/bottom 很关键），以屏幕左上角为原点，x 向右递增，y 向下递增

个人理解如图所示：

易混淆重点：margins 的 top ≠ 回调里的 top

名称	出现位置	表示的含义	简单理解
margins 中的 top/bottom/left/right	.relativeToViewport({ ... })	参照区域边界的扩张或缩小	扩大/缩小观察范围
回调中的 top/bottom/left/right	observe(..., callback(res))	某个矩形相对屏幕的坐标位置	当前元素在哪里

在可视化区域中（也就是第一象限正象限）

bottom = top + height

right = left + width

示例解析：

返回值	含义
top: -20	元素顶部在屏幕上边缘 上方 20px（不可见部分）
bottom: -20	元素底部在屏幕下边缘 下方 20px

thresholds（阈值）是什么？

设置观察触发规则：

new IntersectionObserver(callback, {
  thresholds: [0, 0.5, 1]
})

threshold	意味
0	刚相交/离开 触发
0.5	至少一半在参照区域才触发
1	完全进入参照区域才触发

thresholds 越高，需要更"深入"进入参照区域才算触发。

也可以根据微信小程序文档 developers.weixin.qq.com/miniprogram... 下载demo自己修改参数打印res，就可以更生动的体会。