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

## IntersectionObserver.relativeTo

> [VERSION] 基础库 >= 2.10.0

### 描述

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

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `selector` | `string` | 是 | 选择器 |
| `margins` | `Margins` | 否 | 用来扩展（或收缩）参照节点布局区域的边界 |

### 返回值

类型: `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="scroll-area">
  <view class="item">观察目标</view>
</scroll-view>
```

```js
// index.js
Page({
  onReady() {
    var observer = ty.createIntersectionObserver(this);
    observer
      .relativeTo('.scroll-area', { top: 0, bottom: 0 })
      .observe('.item', (res) => {
        console.log('相交比例', res.intersectionRatio);
      });
  },
});
```

```css
// index.tyss
.scroll-area {
  height: 400rpx;
  overflow: hidden;
}
.item {
  height: 200rpx;
  background-color: #e8f4ff;
  margin-top: 300rpx;
}
```