开发
API

IntersectionObserver.observe

指定目标节点并开始监听目标节点和参照区域相交状态的变化情况。

语法

intersectionObserver.observe(targetSelector, callback)

参数说明

string targetSelector

选择器字符串,指定目标节点。

Function callback

监听相交状态变化的回调函数。

callback 返回对象的属性

参数参数类型说明
idstring目标节点的 id
datasetobject目标节点的 dataset
intersectionRationumber目标节点与参照区域的相交比例。范围 [0, 100],可能是浮点数
intersectionRectobject目标节点与参照区域相交范围的边界信息
boundingClientRectobject目标节点的边界信息
relativeRectobject参照区域的边界信息
timenumber相交检测时的时间戳

intersectionRect、boundingClientRect 结构说明

参数参数类型说明
leftnumber区域左边界到屏幕左侧的距离
rightnumber区域右边界到屏幕左侧的距离
topnumber区域上边界到屏幕上侧的距离
bottomnumber区域下边界到屏幕上侧的距离
widthnumber区域的宽度, 即:width = right - left
heightnumber区域的高度, 即:height = bottom - top

relativeRect 结构说明

参数参数类型说明
leftnumber参照区域左边界到屏幕左侧的距离
rightnumber参照区域右边界到屏幕左侧的距离
topnumber参照区域上边界到屏幕上侧的距离
bottomnumber参照区域下边界到屏幕上侧的距离

返回值

无返回值。

扫码体验

请使用字节宿主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;
});
点击纠错
评价此篇文档