---
name: "SelectorQuery.selectViewport"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "SelectorQuery.selectViewport - 选择显示区域"
---

## SelectorQuery.selectViewport

> [VERSION] 基础库 >= 2.10.0

### 描述

选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息

### 参数

无


### 返回值

类型: `NodesRef`

[NodesRef 对象](/cn/miniapp/develop/miniapp/api/tyml/NodesRef/NodesRef)

### 示例代码

#### 获取视口滚动位置

```html
// index.tyml
<scroll-view scroll-y="{{true}}" class="scroll" bind:scroll="onScroll">
  <view ty:for="{{list}}" ty:key="*this" class="row">{{item}}</view>
</scroll-view>
<button bind:tap="getOffset">获取滚动位置</button>
```

```js
// index.js
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  getOffset() {
    ty.createSelectorQuery()
      .selectViewport()
      .scrollOffset((res) => {
        console.log('滚动位置', res.scrollTop, res.scrollLeft);
      })
      .exec();
  },
});
```

```css
// index.tyss
.scroll {
  height: 400rpx;
}
.row {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
  padding-left: 20rpx;
}
```