> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - When a **\<List>** is nested in this component, you are advised to specify the width and height of the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
| scrollBarColor | Color | - | Color of the scrollbar.|
| scrollBarWidth | Length | - | Width of the scrollbar.|
- ScrollDirection
| Name | Description |
| -------- | -------- |
| Horizontal | Only horizontal scrolling is supported.|
| Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. |
- ScrollDirection enums
| Name | Description |
| ---------- | ---------- |
| Horizontal | Only horizontal scrolling is supported.|
| Vertical | Only vertical scrolling is supported.|
| None | Scrolling is disabled. |
## Events
| Name | Description |
| -------- | -------- |
| onScrollBegin<sup>9+</sup>(dx: number, dy: number) => { dxRemain: number, dyRemain: number } | Called when scrolling starts.<br>Parameters<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScroll(xOffset: number, yOffset: number) => void | Invoked when scrolling starts. It returns the horizontal and vertical offsets. |
| onScrollEdge(side: Edge) => void | Invoked when scrolling reaches the edge. |
| onScrollEnd() => void | Invoked when scrolling stops. |
| onScrollBegin<sup>9+</sup>(dx: number, dy: number) => { dxRemain: number, dyRemain: number } | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
| onScrollEdge(side: Edge) => void | Invoked when scrolling reaches the edge. |
| onScrollEnd() => void | Invoked when scrolling stops. |
> **NOTE**
>
> If the **onScrollBegin** event and **scrollBy** method are used to implement nested scrolling, you must set **edgeEffect** of the child scrolling node to **None**. For example, if the **\<Scroll>** component is nested with the **\<List>** component, the **edgeEffect** attribute of the **\<List>** component must be set to **EdgeEffect.None**.
> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
## Scroller
Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
Controller of the scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
### Objects to Import
```
scroller: Scroller = new Scroller()
```
...
...
@@ -74,11 +72,11 @@ Scrolls to the specified position.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md) \|<br>CubicBezier \|<br>SpringCurve<br>} | No | | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
### scrollEdge
...
...
@@ -90,10 +88,18 @@ Scrolls to the edge of the container.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
| Name | Type | Mandatory | Default Value | Description |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
| direction | Axis | No | - | Scrolling direction: horizontal or vertical. |
