IntersectionObserver.relativeToViewport
指定页面显示区域作为参照区域之一。
语法
intersectionObserver.relativeToViewport([margins])参数说明
Object margins
可选，用来扩展（或收缩）参照节点布局区域的边界，属性如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| left | number | 0 | 否 | 节点布局区域的左边界 | 1.10.4 |
| right | number | 0 | 否 | 节点布局区域的右边界 | 1.10.4 |
| top | number | 0 | 否 | 节点布局区域的上边界 | 1.10.4 |
| bottom | number | 0 | 否 | 节点布局区域的下边界 | 1.10.4 |
返回值
IntersectionObserver 对象实例。
扫码体验
请使用字节宿主APP扫码
代码示例
TTML
<!-- 一个全屏宽高的元素，使得下方的 #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;
});点击纠错
评价此篇文档