# IntersectionObserver.observe

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

# 支持说明

应用能力 Android iOS PC 预览效果
小程序 3.0.0 3.0.0 3.2.0 待补充
网页应用 X X X 待补充

# 输入

名称 数据类型 必填 默认值 描述
targetSelector string 选择器
callback function 回调函数

# 输出

名称 数据类型 描述
param object 描述
 ∟ intersectionRatio number 相交比例
 ∟ intersectionRect object 相交区域的边界
  ∟ left number 左边界
  ∟ right number 右边界
  ∟ top number 上边界
  ∟ bottom number 下边界
 ∟ boundingClientRect object 目标边界
  ∟ left number 左边界
  ∟ right number 右边界
  ∟ top number 上边界
  ∟ bottom number 下边界
 ∟ relativeRect object 参照区域的边界
  ∟ left number 左边界
  ∟ right number 右边界
  ∟ top number 上边界
  ∟ bottom number 下边界
 ∟ time number 相交检测时的时间戳

# 代码示例

observer = bz.createIntersectionObserver(this);
observer.relativeTo('.scroll-view').observe('.ball', (res) => {
    if (res.intersectionRatio > 0 && !this.appear) {
        this.appear = true;
    } else if (!res.intersectionRatio > 0 && this.appear) {
        this.appear = false;
    }
})
1
2
3
4
5
6
7
8
最后更新于 : 2/8/2023, 8:14:36 PM