IntersectionObserver.observe
- 方法参数
- 示例
  - 图片示例
  - 代码示例

IntersectionObserver.observe

解释：指定目标节点并开始监听相交状态变化情况。

方法参数

String targetSelector, Function callback

targetSelector 参数说明

选择器。

callback 参数说明

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

callback 返回参数说明

属性	类型	说明
intersectionRatio	Number	相交比例
intersectionRect	Object	相交区域的边界
boundingClientRect	Object	目标边界
relativeRect	Object	参照区域的边界
time	Number	相交检测时的时间戳

intersectionRect 参数说明

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界
width	Number	相交区域的宽度
height	Number	相交区域的高度

boundingClientRect 参数说明

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界
width	Number	目标宽度
height	Number	目标高度

relativeRect 参数说明

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例

SWAN
JS

<view class="wrap">
    <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
            <text class="notice">向下滚动让小球出现</text>
            <!-- 占位元素 -->
            <view class="filling"></view> 
            <!-- 小球 -->
            <view class="ball"></view>
        </view>
    </scroll-view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">top:</view>
        <view class="list-item-value">{{intersectionRect.top}}</view>
    </view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">right:</view>
        <view class="list-item-value">{{intersectionRect.right}}</view>
    </view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">bottom:</view>
        <view class="list-item-value">{{intersectionRect.bottom}}</view>
    </view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">left:</view>
        <view class="list-item-value">{{intersectionRect.left}}</view>
    </view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">width</view>
        <view class="list-item-value">{{intersectionRect.width}}</view>
    </view>
    <view class="list-area border-bottom">
        <view class="list-item-key-4">height</view>
        <view class="list-item-value">{{intersectionRect.height}}</view>
    </view>
</view>