---
name: "IntersectionObserver.observe"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "observe"
---

## IntersectionObserver.observe

> [VERSION] 基础库 >= 2.10.0

### 描述

指定目标节点并开始监听相交状态变化。

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `selector` | `string` | 是 | 目标节点选择器 |
| `callback` | `(entry: Object) => void` | 是 | 相交状态变化时的回调函数 |

##### IntersectionObserver.observe.callback(entry) 的属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `time` | `number` | 是 | - | 相交检测时的时间戳 |
| `relativeRect` | `Margins` | 是 | - | 参照区域的边界 |
| `boundingClientRect` | `DOMRect` | 是 | - | 目标节点的边界 |
| `intersectionRect` | `DOMRect` | 是 | - | 相交区域的边界 |
| `intersectionRatio` | `number` | 是 | - | 相交比例 |
| `dataset` | `Record<string, any>` | 是 | - | 目标节点的 dataset |
| `id` | `string` | 是 | - | 目标节点的 id |


### 返回值

类型: `IntersectionObserver`

[IntersectionObserver 实例](/cn/miniapp/develop/miniapp/api/tyml/IntersectionObserver/IntersectionObserver)（支持链式调用）

### 引用对象

##### `type` Margins

| 属性 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `left` | `number` | 否 | 左边界 |
| `right` | `number` | 否 | 右边界 |
| `top` | `number` | 否 | 上边界 |
| `bottom` | `number` | 否 | 下边界 |


### 示例代码

#### 监听元素与视口的相交状态

```html
// index.tyml
<scroll-view scroll-y="{{true}}" class="container">
  <view class="placeholder">向下滚动查看效果</view>
  <view class="target">目标元素</view>
</scroll-view>
<view class="status">相交比例：{{ratio}}</view>
```

```js
// index.js
Page({
  data: {
    ratio: 0,
  },
  onReady() {
    var observer = ty.createIntersectionObserver(this, {
      thresholds: [0, 0.5, 1],
    });
    observer
      .relativeToViewport()
      .observe('.target', (res) => {
        this.setData({ ratio: res.intersectionRatio });
        console.log('相交比例', res.intersectionRatio);
        console.log('目标位置', res.boundingClientRect);
        console.log('参照区域', res.relativeRect);
        console.log('相交区域', res.intersectionRect);
        console.log('时间戳', res.time);
      });
  },
});
```

```css
// index.tyss
.container {
  height: 100vh;
}
.placeholder {
  height: 800rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.target {
  height: 300rpx;
  background-color: #e8f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
}
```