开发
API

IntersectionObserver.relativeTo

使用选择器指定一个节点,作为参照区域之一。

语法

intersectionObserver.relativeTo(selector[, margins])

参数说明

string selector

选择器字符串。

Object margins

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

属性名类型默认值必填说明最低支持版本
leftnumber0节点布局区域的左边界1.10.4
rightnumber0节点布局区域的右边界1.10.4
topnumber0节点布局区域的上边界1.10.4
bottomnumber0节点布局区域的下边界1.10.4

返回值

IntersectionObserver 对象实例。

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

TTML

<scroll-view id="sv" scroll-y style="background:#eee; height: 300px">
  <view id="target" style="margin:300px auto; width: 150px; height: 150px; background: lightblue;">
  </view>
</scroll-view>

JavaScript

this.intersectionObserver = tt.createIntersectionObserver(this);

// 指定 #sv 作为参照区域
this.intersectionObserver.relativeTo("#sv");

// 当 #target 节点进入或离开 #sv 节点的可视区域时,则会触发回调函数
this.intersectionObserver.observe("#target", function (res) {
  const { intersectionRatio, intersectionRect, boundingClientRect, relativeRect } = res;
});
点击纠错
评价此篇文档