---
order: 15
navTitle: 滚动
---
# SuperPage交互-滚动

使用滚动交互可以使页面或具有滚动属性的组件，在指定范围内滚动，如[滑动面板](../../components/layout/sliderpanel.md)可进行指定的上一页，下一页滚动，示例如下：

![示例](./images/2021_08_27_18_43_38.gif)

示例地址：[滚动](https://demo.succbi.com/v5/demo-spg/滚动)

## 使用滚动交互{#use}

滚动交互的使用，极大的方便了用户在页面冗长的情况下快速将页面滚动到自己想要章节，以下方页面滚动到基础功能处为例：

![基础功能](./images/2021-08-27-18-54-23.png)

- **增加一个按钮**：在页面新增一个按钮如`滚动到基础功能处`
- **增加滚动交互**：给按钮增加一个`滚动`交互，**滚动范围**选择`当前页面`，**滚动距离**选择`到组件`，**到组件**选择基础功能所在的`单行文本3`

## 滚动范围设置{#limit}

想要控制滚动在什么范围内进行，可以对**滚动范围**进行设置。系统提供的**滚动范围**有：`自动`、`当前页面`、`指定组件`。滚动交互能够正常进行的前提条件是：设置的**滚动范围**是可滚动的。

- **自动**：当前选中组件的上层容器
- **当前页面**：当前设计器中的画布
- **指定组件**：即自定义滚动范围，如`面板3`

## 滚动距离设置{#space}

如果一个页面有多个章节，我们想快速定位到具体的章节，就可以将**滚动距离**设置成这个章节。滚动距离只能在[滚动范围](#limit)内进行设置。系统提供的**滚动距离**包括`到顶部`、`到底部`、`事件源序号`、`上一页`、`下一页`、`上一行`、`下一行`、`到组件`、`动态组件`这九种。

![动态组件](./images/2021-08-27-15-39-29.png)

- `到顶部`与`到底部`可以直接定位到滚动范围的顶部和底部
- `事件源序号`、`上一页`、`下一页`、`上一行`、`下一行`这几种主要是面向[滑动面板](../../components/layout/sliderpanel.md)，滑动面板自带的按钮中就包含了滚动到[事件源序号](./switch-panelbook.md#rules)、[上一页](./switch-panelbook.md#rules)、[下一页](./switch-panelbook.md#rules)
- `到组件`则是能够直接将指定组件滚动到**滚动范围**顶部，若**滚动范围**和**滚动距离**均设置为`到组件`时，**滚动距离**可选择的组件会限定在**滚动范围**的组件中。
- `动态组件`相当于`到组件`的特殊情况，通过表达式控制`到组件`的具体情况,如表达式`IF([标签页1].[值]='基础功能', 'text3', IF([标签页1].[值]='首尾滚动', 'text7', 'text6'))`