今日頭條小程序intersectionobserverrelativeto

小編:啊南 36閱讀 2020.12.16

IntersectionObserver.relativeTo

使用選擇器指定一個節點,作為參照區域之一。

語法
intersectionObserver.relativeTo(selector[, margins])
參數說明string selector

選擇器字符串。

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

<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;});
關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看