IntersectionObserver.observe
指定目标节点并开始监听目标节点和参照区域相交状态的变化情况。
语法
intersectionObserver.observe(targetSelector, callback)参数说明
string targetSelector
选择器字符串，指定目标节点。
Function callback
监听相交状态变化的回调函数。
callback 返回对象的属性
| 参数 | 参数类型 | 说明 |
|---|---|---|
| id | string | 目标节点的 id |
| dataset | object | 目标节点的 dataset |
| intersectionRatio | number | 目标节点与参照区域的相交比例。范围 [0, 100]，可能是浮点数 |
| intersectionRect | object | 目标节点与参照区域相交范围的边界信息 |
| boundingClientRect | object | 目标节点的边界信息 |
| relativeRect | object | 参照区域的边界信息 |
| time | number | 相交检测时的时间戳 |
intersectionRect、boundingClientRect 结构说明
| 参数 | 参数类型 | 说明 |
|---|---|---|
| left | number | 区域左边界到屏幕左侧的距离 |
| right | number | 区域右边界到屏幕左侧的距离 |
| top | number | 区域上边界到屏幕上侧的距离 |
| bottom | number | 区域下边界到屏幕上侧的距离 |
| width | number | 区域的宽度, 即：width = right - left |
| height | number | 区域的高度, 即：height = bottom - top |
relativeRect 结构说明
| 参数 | 参数类型 | 说明 |
|---|---|---|
| left | number | 参照区域左边界到屏幕左侧的距离 |
| right | number | 参照区域右边界到屏幕左侧的距离 |
| top | number | 参照区域上边界到屏幕上侧的距离 |
| bottom | number | 参照区域下边界到屏幕上侧的距离 |
返回值
无返回值。
扫码体验
请使用字节宿主APP扫码
代码示例
<!-- 一个全屏宽高的元素，使得下方的 #target 节点的初始位置位于手机屏幕之外-->
<view style="height: 100%"></view>
<!-- 待观测的节点 -->
<view id="target" style="margin:300px auto; width: 150px; height: 150px; background: lightblue;">
</view>JavaScript
this.intersectionObserver = tt.createIntersectionObserver(this);
// 指定页面显示区域作为参照区域
this.intersectionObserver.relativeToViewport();
// 当 #target 节点进入或离开页面显示区域时，则会触发回调函数
this.intersectionObserver.observe("#target", function (res) {
// 利用相交比例和各种边界信息实现业务逻辑，例如：判断目标元素是否进入屏幕可视范围等等
const { intersectionRatio, intersectionRect, boundingClientRect, relativeRect } = res;
});点击纠错
评价此篇文档