# 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
3
4
5
6
7
8