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

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

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

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

调用方式示例：

css 复制代码

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

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

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

每个 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（阈值）是什么？

设置观察触发规则：

scss 复制代码

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

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

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