---
name: "IntersectionObserver.relativeTo"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "relativeTo"
---

## IntersectionObserver.relativeTo

> [VERSION] Base Library >= 2.10.0

### Description

Use a selector to specify a node as one of the reference regions

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `selector` | `string` | Yes | Selector |
| `margins` | `Margins` | No | Used to expand (or shrink) the bounds of the reference node’s layout area |

### Return Value

Type: `IntersectionObserver`

[IntersectionObserver instance](/en/miniapp/develop/miniapp/api/tyml/IntersectionObserver/IntersectionObserver)(supports chaining)

### Referenced Types

##### `type` Margins

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `left` | `number` | No | Left boundary |
| `right` | `number` | No | Right boundary |
| `top` | `number` | No | Top boundary |
| `bottom` | `number` | No | Bottom boundary |


### Examples

#### Specify the reference node

```html
// index.tyml
<scroll-view scroll-y="{{true}}" class="scroll-area">
  <view class="item">Target</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('Intersection ratio', res.intersectionRatio);
      });
  },
});
```

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