开发
API

IntersectionObserver.relativeToViewport

指定页面显示区域作为参照区域之一。

语法

intersectionObserver.relativeToViewport([margins])

参数说明

Object margins

可选,用来扩展(或收缩)参照节点布局区域的边界,属性如下:

属性名类型默认值必填说明最低支持版本
leftnumber0节点布局区域的左边界1.10.4
rightnumber0节点布局区域的右边界1.10.4
topnumber0节点布局区域的上边界1.10.4
bottomnumber0节点布局区域的下边界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;
});
点击纠错
评价此篇文档