1# Scroll 2 3The **Scroll** component scrolls the content when the layout size of a component exceeds the size of its parent component. 4 5> **NOTE** 6> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7> - When nesting a **List** within this component, specify the width and height for 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**. 8> - This component can scroll only when the size on the main axis is less than the content size. 9> - This component can produce a bounce effect only when there is more than one screen of content. 10 11 12## Child Components 13 14This component supports only one child component. 15 16 17## APIs 18 19Scroll(scroller?: Scroller) 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| scroller | [Scroller](#scroller) | No| Scroller, which can be bound to scrollable components.| 30 31## Attributes 32 33In addition to [universal attributes](ts-universal-attributes-size.md) and [scrollable component common attributes](ts-container-scrollable-common.md#attributes), the following attributes are also supported. 34 35### scrollable 36 37scrollable(value: ScrollDirection) 38 39Sets the scrolling direction. 40 41**Atomic service API**: This API can be used in atomic services since API version 11. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name| Type | Mandatory| Description | 48| ------ | ------------------------------------------- | ---- | ----------------------------------------------- | 49| value | [ScrollDirection](#scrolldirection) | Yes | Scrolling direction.<br>Default value: **ScrollDirection.Vertical**| 50 51### scrollBar 52 53scrollBar(barState: BarState) 54 55Sets the scrollbar state. If the container component cannot be scrolled, the scrollbar is not displayed. If the size of a child component of a container component is infinite, the scrollbar cannot be dragged or scrolled with the child component. 56 57Since API version 10, when the scrollable component has rounded corners, to prevent the scrollbar from being cut off by the corners, the scrollbar will automatically calculate the clearance distance from the top and bottom. 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63**Parameters** 64 65| Name | Type | Mandatory| Description | 66| -------- | ----------------------------------------- | ---- | -------------------------------------- | 67| barState | [BarState](ts-appendix-enums.md#barstate) | Yes | Scrollbar state.<br>Default value: **BarState.Auto**| 68 69### scrollBarColor 70 71scrollBarColor(color: Color | number | string) 72 73Sets the scrollbar color. 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79**Parameters** 80 81| Name| Type | Mandatory| Description | 82| ------ | ------------------------------------------------------------ | ---- | -------------- | 83| color | [Color](ts-appendix-enums.md#color) \| number \| string | Yes | Scrollbar color.<br>Default value: **'\#182431'** (40% opacity) | 84 85### scrollBarWidth 86 87scrollBarWidth(value: number | string) 88 89Sets the scrollbar width. This attribute cannot be set in percentage. After the width is set, the scrollbar is displayed with the set width in normal state and pressed state. If the set width exceeds the height of the **Scroll** component on the main axis, the scrollbar reverts to the default width. 90 91**Atomic service API**: This API can be used in atomic services since API version 11. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95**Parameters** 96 97| Name| Type | Mandatory| Description | 98| ------ | -------------------------- | ---- | ----------------------------------------- | 99| value | number \| string | Yes | Scrollbar width.<br>Default value: **4**<br>Unit: vp| 100 101### scrollSnap<sup>10+</sup> 102 103scrollSnap(value: ScrollSnapOptions) 104 105Sets the scroll snapping mode. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ----------------------------------------- | ---- | -------------------------- | 115| value | [ScrollSnapOptions](#scrollsnapoptions10) | Yes | Scroll snapping mode.| 116 117### edgeEffect 118 119edgeEffect(edgeEffect: EdgeEffect, options?: EdgeEffectOptions) 120 121Sets the effect used when the scroll boundary is reached. 122 123**Atomic service API**: This API can be used in atomic services since API version 11. 124 125**System capability**: SystemCapability.ArkUI.ArkUI.Full 126 127**Parameters** 128 129| Name | Type | Mandatory| Description | 130| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 131| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Yes | Effect used when the scroll boundary is reached. The spring and shadow effects are supported.<br>Default value: **EdgeEffect.None**| 132| options<sup>11+</sup> | [EdgeEffectOptions](ts-container-scrollable-common.md#edgeeffectoptions11) | No | Whether to enable the scroll effect when the component content is smaller than the component itself. The value **{ alwaysEnabled: true }** means to enable the scroll effect, and **{ alwaysEnabled: false }** means the opposite.<br>Default value: **{ alwaysEnabled: true }**| 133 134### enableScrollInteraction<sup>10+</sup> 135 136enableScrollInteraction(value: boolean) 137 138Sets whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scroll controller API is not affected. 139 140**Atomic service API**: This API can be used in atomic services since API version 11. 141 142**System capability**: SystemCapability.ArkUI.ArkUI.Full 143 144**Parameters** 145 146| Name| Type | Mandatory| Description | 147| ------ | ------- | ---- | ----------------------------------- | 148| value | boolean | Yes | Whether to support scroll gestures.<br>Default value: **true**| 149 150### nestedScroll<sup>10+</sup> 151 152nestedScroll(value: NestedScrollOptions) 153 154Sets the nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component. 155 156**Atomic service API**: This API can be used in atomic services since API version 11. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160**Parameters** 161 162| Name| Type | Mandatory| Description | 163| ------ | ----------------------------------------------------- | ---- | -------------- | 164| value | [NestedScrollOptions](ts-container-scrollable-common.md#nestedscrolloptions10) | Yes | Nested scrolling options.<br>Default value: **{ scrollForward: NestedScrollMode.SELF_ONLY, scrollBackward: NestedScrollMode.SELF_ONLY }**| 165 166### friction<sup>10+</sup> 167 168friction(value: number | Resource) 169 170Sets the friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process. A value less than or equal to 0 evaluates to the default value. 171 172**Atomic service API**: This API can be used in atomic services since API version 11. 173 174**System capability**: SystemCapability.ArkUI.ArkUI.Full 175 176**Parameters** 177 178| Name| Type | Mandatory| Description | 179| ------ | ---------------------------------------------------- | ---- | --------------------------------------------------------- | 180| value | number \| [Resource](ts-types.md#resource) | Yes | Friction coefficient.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>Since API version 11, the default value for non-wearable devices is **0.7**.<br>Since API version 12, the default value for non-wearable devices is **0.75**.| 181 182### enablePaging<sup>11+</sup> 183 184enablePaging(value: boolean) 185 186Sets whether to enable the swipe-to-turn-pages feature. If both **enablePaging** and **scrollSnap** are set, **scrollSnap** takes effect, but **enablePaging** does not. 187 188**Atomic service API**: This API can be used in atomic services since API version 12. 189 190**System capability**: SystemCapability.ArkUI.ArkUI.Full 191 192**Parameters** 193 194| Name| Type | Mandatory| Description | 195| ------ | ------- | ---- | ------------------------------------- | 196| value | boolean | Yes | Whether to enable the swipe-to-turn-pages feature. The value **true** means to enable the swipe-to-turn-pages feature, and **false** means the opposite.<br>Default value: **false**| 197 198### initialOffset<sup>12+</sup> 199 200initialOffset(value: OffsetOptions) 201 202Sets the initial scrolling offset. This attribute takes effect only during the initial layout of the component. After the initial layout, dynamically changing the value of this attribute does not have any effect. 203 204**Atomic service API**: This API can be used in atomic services since API version 12. 205 206**System capability**: SystemCapability.ArkUI.ArkUI.Full 207 208**Parameters** 209 210| Name| Type | Mandatory| Description | 211| ------ | ------- | ---- | ------------------------------------- | 212| value | [OffsetOptions](#offsetoptions12) | Yes |Initial scrolling offset. When the value specified is a percentage, the initial scrolling offset is calculated as the product of the **Scroll** component's size in the main axis direction and the percentage value.| 213 214## ScrollDirection 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218| Name | Description | 219| ---------- | ------------------------ | 220| Horizontal | Only horizontal scrolling is supported.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 221| Vertical | Only vertical scrolling is supported.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 222| None | Scrolling is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 223| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.| 224 225## ScrollSnapOptions<sup>10+</sup> 226 227**Atomic service API**: This API can be used in atomic services since API version 11. 228 229**System capability**: SystemCapability.ArkUI.ArkUI.Full 230 231| Name | Type | Mandatory | Description | 232| ---------- | --------------------|-------------------- | -------- | 233| snapAlign | [ScrollSnapAlign](ts-container-list.md#scrollsnapalign10) | Yes| Alignment mode for the scroll snap position.<br>**NOTE**<br>1. Default value: **ScrollSnapAlign.NONE**| 234| snapPagination | [Dimension](ts-types.md#dimension10) \| Array\<Dimension\> | No| Snap points for the **Scroll** component. Each snap point defines the offset from an edge to which the **Scroll** component can scroll.<br>**NOTE**<br>1. A value of the **Dimension** type indicates the size per page. The system automatically works out the position of each snap point based on the value. For example, if the value is **500**, the position of the snap point is [0,500,1000,1500, ...].<br>2. A value of the **Array\<Dimension\>** type indicates an array of snap point positions defined by **Dimension**. The range of each dimension is [0, scrollable distance]. Point 0 and the bottom of the scrollable distance automatically become the snap points.<br>3. If this attribute is not set or **Dimension** is set to a value less than or equal to 0, the value is regarded as an abnormal value. In this case, there is no scroll snapping. When the value is of the **Array\<Dimension\>** type, the items in the array must be monotonically increasing.<br>4. When the value is a percentage, the actual size is the product of the viewport of the **Scroll** component and the percentage value.| 235| enableSnapToStart | boolean | No| Whether to enable the snap to start feature. When scroll snapping is defined for the **Scroll** component, setting this attribute to **false** enables the component to scroll between the start edge and the first snap point.<br>**NOTE**<br>1. Default value: **true**<br>2. This attribute takes effect only when **snapPagination** is set to a value of the **Array\<Dimension\>** type; it does not work with values of the **Dimension** type.| 236| enableSnapToEnd | boolean | No| Whether to enable the snap to end feature. When scroll snapping is defined for the **Scroll** component, setting this attribute to **false** enables the component to scroll between the end edge and the last snap point.<br>**NOTE**<br>1. Default value: **true**<br>2. This attribute takes effect only when **snapPagination** is set to a value of the **Array\<Dimension\>** type; it does not work with values of the **Dimension** type.| 237 238## Events 239 240In addition to [universal events](ts-universal-events-click.md) and [scrollable component common events](ts-container-scrollable-common.md#events), the following events are also supported. 241 242### onScrollFrameBegin<sup>9+</sup> 243 244onScrollFrameBegin(event: (offset: number, state: ScrollState) => { offsetRemain: number; }) 245 246Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **Scroll** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result. 247 248The value of **offsetRemain** can be a negative value. 249 250If the **onScrollFrameBegin** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **List** is nested in the **Scroll** component, **edgeEffect** of the **List** must be set to **EdgeEffect.None**. 251 252Notes: 253 2541. This event is triggered when scrolling is started by the **Scroll** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>4. This event is not triggered when the scroll bar is dragged. 255 256**Atomic service API**: This API can be used in atomic services since API version 11. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name| Type | Mandatory| Description | 263| ------ | ------------------------------------------------------- | ---- | -------------------------- | 264| offset | number | Yes | Amount to scroll by, in vp.| 265| state | [ScrollState](ts-container-list.md#scrollstate)| Yes | Current scroll state. | 266 267**Return value** 268 269| Type | Description | 270| ------------------------ | -------------------- | 271| { offsetRemain: number } | Actual amount by which the grid scrolls, in vp.| 272 273### onScroll<sup>(deprecated)</sup> 274 275onScroll(event: (xOffset: number, yOffset: number) => void) 276 277Triggered to return the horizontal and vertical offsets, in vp, during scrolling when the specified scroll event occurs. 278 279**NOTE** 280 2811. This event is triggered when scrolling is started by the **Scroll** component or other input settings, such as keyboard and mouse operations. 282 2832. This event is triggered when the controller API is called. 284 2853. This event supports the out-of-bounds bounce effect. 286 287This API is deprecated since API version 12. You are advised to use [onWillScroll](#onwillscroll12) instead. 288 289**Atomic service API**: This API can be used in atomic services since API version 11. 290 291**System capability**: SystemCapability.ArkUI.ArkUI.Full 292 293**Parameters** 294 295| Name | Type | Mandatory| Description | 296| ------- | --------------------------------------------------------- | ---- | ---------------------- | 297| xOffset | number | Yes | Horizontal offset per frame during scrolling. A positive offset indicates scrolling to the left, and a negative offset indicates scrolling to the right.<br>Unit: vp| 298| yOffset | number | Yes | Vertical offset per frame during scrolling. A positive offset indicates scrolling upward, and a negative offset indicates scrolling downward.<br>Unit: vp| 299 300### onWillScroll<sup>12+</sup> 301 302onWillScroll(handler: ScrollOnWillScrollCallback) 303 304Triggered before scrolling. 305 306The callback provides the amount of offset that is about to be scrolled in the current frame, along with the current scroll status and the source of the scrolling operation. The offset provided in the callback is the calculated intended scrolling offset, not the final actual scrolling offset. You can specify the intended scrolling offset for the **Scroll** through the return value of this callback. 307 308**NOTE** 309 3101. This event is triggered when scrolling is started by the **Scroll** component or other input settings, such as keyboard and mouse operations. 311 3122. This event is triggered when the controller API is called. 313 3143. This event supports the out-of-bounds bounce effect. 315 316**Atomic service API**: This API can be used in atomic services since API version 12. 317 318**System capability**: SystemCapability.ArkUI.ArkUI.Full 319 320**Parameters** 321 322| Name | Type | Mandatory| Description | 323| ------- | --------------------------------------------------------- | ---- | ---------------------- | 324| handler | [ScrollOnWillScrollCallback](#scrollonwillscrollcallback12) | Yes | Callback triggered before scrolling.| 325 326### onDidScroll<sup>12+</sup> 327 328onDidScroll(handler: ScrollOnScrollCallback) 329 330Triggered when the **Scroll** component scrolls. 331 332The return value is the scrolling offset amount in the current frame, along with the current scroll state. 333 334**NOTE** 335 3361. This event is triggered when scrolling is started by the **Scroll** component or other input settings, such as keyboard and mouse operations. 337 3382. This event is triggered when the controller API is called. 339 3403. This event supports the out-of-bounds bounce effect. 341 342**Atomic service API**: This API can be used in atomic services since API version 12. 343 344**System capability**: SystemCapability.ArkUI.ArkUI.Full 345 346**Parameters** 347 348| Name | Type | Mandatory| Description | 349| ------- | --------------------------------------------------------- | ---- | ---------------------- | 350| handler | [ScrollOnScrollCallback](#scrollonscrollcallback12) | Yes | Callback triggered when the **Scroll** component scrolls.| 351 352### onScrollEdge 353 354onScrollEdge(event: (side: Edge) => void) 355 356Triggered when scrolling reaches the edge. 357 358**NOTE** 359 3601. This event is triggered when scrolling reaches the edge after being started by the **Scroll** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. 361 362**Atomic service API**: This API can be used in atomic services since API version 11. 363 364**System capability**: SystemCapability.ArkUI.ArkUI.Full 365 366**Parameters** 367 368| Name| Type | Mandatory| Description | 369| ------ | --------------------------------- | ---- | ------------------ | 370| side | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.| 371 372### onScrollEnd<sup>(deprecated) </sup> 373 374onScrollEnd(event: () => void) 375 376Triggered when scrolling stops. 377 378**NOTE** 379 3801. This event is triggered when scrolling is stopped by the **Scroll** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. 381 382This event is deprecated since API version 9. Use the **onScrollStop** event instead. 383 384**System capability**: SystemCapability.ArkUI.ArkUI.Full 385 386### onScrollStart<sup>9+</sup> 387 388onScrollStart(event: () => void) 389 390Triggered when scrolling starts and is initiated by the user's finger dragging the **Scroll** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts. 391 392**NOTE** 393 3941. This event is triggered when scrolling is started by the **Scroll** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. 395 396**Atomic service API**: This API can be used in atomic services since API version 11. 397 398**System capability**: SystemCapability.ArkUI.ArkUI.Full 399 400### onScrollStop<sup>9+</sup> 401 402onScrollStop(event: () => void) 403 404Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops. 405 406**NOTE** 407 4081. This event is triggered when scrolling is stopped by the **Scroll** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. 409 410**Atomic service API**: This API can be used in atomic services since API version 11. 411 412**System capability**: SystemCapability.ArkUI.ArkUI.Full 413 414## ScrollOnScrollCallback<sup>12+</sup> 415 416type ScrollOnScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState) => void 417 418Represents the callback triggered when the **Scroll** component scrolls. 419 420**Atomic service API**: This API can be used in atomic services since API version 12. 421 422**System capability**: SystemCapability.ArkUI.ArkUI.Full 423 424| Name | Type | Mandatory| Description | 425| ----------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 426| xOffset | number | Yes | Horizontal offset per frame during scrolling. A positive offset indicates scrolling to the left, and a negative offset indicates scrolling to the right.<br>Unit: vp| 427| yOffset | number | Yes | Vertical offset per frame during scrolling. A positive offset indicates scrolling upward, and a negative offset indicates scrolling downward.<br>Unit: vp| 428| scrollState | [ScrollState](ts-container-list.md#scrollstate)| Yes | Current scrolling state. | 429 430> **NOTE** 431> 432> If the **onScrollFrameBegin** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **List** is nested in the **Scroll** component, **edgeEffect** of the **List** must be set to **EdgeEffect.None**. 433 434## ScrollOnWillScrollCallback<sup>12+</sup> 435 436type ScrollOnWillScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => void | OffsetResult 437 438Callback triggered before scrolling. 439 440**Atomic service API**: This API can be used in atomic services since API version 12. 441 442**System capability**: SystemCapability.ArkUI.ArkUI.Full 443 444| Name | Type | Mandatory| Description | 445| ----------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 446| xOffset | number | Yes | Horizontal offset per frame during scrolling. A positive offset indicates scrolling to the left, and a negative offset indicates scrolling to the right.<br>Unit: vp| 447| yOffset | number | Yes | Vertical offset per frame during scrolling. A positive offset indicates scrolling upward, and a negative offset indicates scrolling downward.<br>Unit: vp| 448| scrollState | [ScrollState](ts-container-list.md#scrollstate)| Yes | Current scrolling state. | 449| scrollSource | [ScrollSource](ts-appendix-enums.md#scrollsource12) | Yes| Source of the current scrolling operation.| 450 451**Return value** 452 453| Type | Description | 454| ------------------------------------------------------------ | ------------------------------------------------------------ | 455| void \| [OffsetResult](#offsetresult11) | If **OffsetResult** is returned, the scrolling will be performed with the offsets specified. Otherwise, the scrolling will be performed with the offsets determined by **(xOffset, yOffset)**.| 456 457## Scroller 458 459Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. One controller can control only one container component. The supported container components are **List**, **Scroll**, **ScrollBar**, **Grid**, and **WaterFlow**. 460 461 462### Objects to Import 463 464``` 465scroller: Scroller = new Scroller() 466``` 467 468### constructor 469 470constructor() 471 472A constructor used to create a **Scroller** object. 473 474**Atomic service API**: This API can be used in atomic services since API version 11. 475 476**System capability**: SystemCapability.ArkUI.ArkUI.Full 477 478### scrollTo 479 480scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration?: number, curve?: Curve | ICurve, canOverScroll?: boolean } | boolean }) 481 482 483Scrolls to the specified position. 484 485**Atomic service API**: This API can be used in atomic services since API version 11. 486 487**System capability**: SystemCapability.ArkUI.ArkUI.Full 488 489**Parameters** 490 491| Name | Type | Mandatory| Description | 492| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 493| xOffset | number \| string | Yes | Horizontal scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, the offset will be 0 for non-animated scrolling. Animated scrolling stops at the starting position by default. By setting the **animation** parameter, you can enable a bounce effect when the scrolling goes beyond the boundary.<br>This parameter takes effect only when the scroll axis is the x-axis.| 494| yOffset | number \| string | Yes | Vertical scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, the offset will be 0 for non-animated scrolling. Animated scrolling stops at the starting position by default. By setting the **animation** parameter, you can enable a bounce effect when the scrolling goes beyond the boundary.<br>This parameter takes effect only when the scroll axis is the y-axis.| 495| animation | [ScrollAnimationOptions](#scrollanimationoptions12)<sup>12+</sup> \| boolean<sup>10+ </sup> | No | Animation configuration, which includes the following:<br>- **ScrollAnimationOptions**: custom animation settings.<br>- **boolean**: whether to enable the default spring animation.<br>Default value:<br>ScrollAnimationOptions: { duration: 1000, curve: Curve.Ease, canOverScroll: false } <br>boolean: false<br>**NOTE**<br>Currently, the **List**, **Scroll**, **Grid**, and **WaterFlow** support the **Boolean** type and **ICurve**.<br>Since API version 12, {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+ </sup>} is abstracted as the **ScrollAnimationOptions** API, and the **canOverScroll** parameter is added to the API.| 496 497 498### scrollEdge 499 500scrollEdge(value: Edge, options?: ScrollEdgeOptions) 501 502 503Scrolls to the edge of the container, regardless of the scroll axis direction. **Edge.Top** and **Edge.Start** produce the same effect, and **Edge.Bottom** and **Edge.End** produce the same effect. 504By default, the **Scroll** component comes with an animation, while the **Grid**, **List**, and **WaterFlow** components do not. 505 506**Atomic service API**: This API can be used in atomic services since API version 11. 507 508**System capability**: SystemCapability.ArkUI.ArkUI.Full 509 510**Parameters** 511 512| Name | Type| Mandatory | Description | 513| ----- | ---- | ---- | --------- | 514| value | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 515| options<sup>12+</sup> | [ScrollEdgeOptions](#scrolledgeoptions12)| No | Mode of scrolling to the edge position.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 516 517### fling<sup>12+</sup> 518 519fling(velocity: number): void 520 521 522Performs inertial scrolling based on the initial velocity passed in. 523 524**Atomic service API**: This API can be used in atomic services since API version 12. 525 526**System capability**: SystemCapability.ArkUI.ArkUI.Full 527 528**Parameters** 529 530| Name | Type| Mandatory| Description | 531| -------- | -------- | ---- | ------------------------------------------------------------ | 532| velocity | number | Yes | Initial velocity of inertial scrolling. Unit: vp/s<br>**NOTE**<br>If the value specified is 0, it is considered as invalid, and the scrolling for this instance will not take effect. If the value is positive, the scroll will move downward; if the value is negative, the scroll will move upward.| 533 534**Error codes** 535 536For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 537 538| ID| Error Message| 539| ------- | -------- | 540| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 541| 100004 | Controller not bound to component. | 542 543### scrollPage<sup>9+</sup> 544 545scrollPage(value: ScrollPageOptions) 546 547Scrolls to the next or previous page. 548 549**Atomic service API**: This API can be used in atomic services since API version 11. 550 551**System capability**: SystemCapability.ArkUI.ArkUI.Full 552 553**Parameters** 554 555| Name| Type | Mandatory| Description | 556| ------ | -------------------------------------------------- | ---- | -------------- | 557| value | [ScrollPageOptions](#scrollpageoptions12)| Yes | Set the Home screen mode| 558 559### scrollPage<sup>(deprecated)</sup> 560 561scrollPage(value: { next: boolean, direction?: Axis }) 562 563Scrolls to the next or previous page. This API is deprecated since API version 9. You are advised to use [scrollPage<sup>9+</sup>](#scrollpage9) instead. 564 565**System capability**: SystemCapability.ArkUI.ArkUI.Full 566 567**Parameters** 568 569| Name | Type | Mandatory | Description | 570| --------- | ------- | ---- | ------------------------------ | 571| 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.| 572| direction | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical. | 573 574### currentOffset 575 576currentOffset(): OffsetResult 577 578**Atomic service API**: This API can be used in atomic services since API version 11. 579 580**System capability**: SystemCapability.ArkUI.ArkUI.Full 581 582| Type | Description| 583| -------- | -------- | 584| [OffsetResult<sup>11+</sup>](#offsetresult11) | Obtains the scrolling offset.<br>**NOTE**<br>If **Scroller** is not bound to a container component or the container component is released abnormally, the return value for **currentOffset** is null.| 585 586### scrollToIndex 587 588scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: ScrollToIndexOptions) 589 590Scrolls to a specified index, with support for setting an extra offset for the scroll. 591 592When **smooth** is set to **true**, all passed items are loaded and counted in layout calculation. This may result in performance issues if a large number of items are involved. 593 594 595> **NOTE** 596> 597> This API only works for the **Grid**, **List**, and **WaterFlow** components. 598 599**Atomic service API**: This API can be used in atomic services since API version 11. 600 601**System capability**: SystemCapability.ArkUI.ArkUI.Full 602 603**Parameters** 604 605| Name | Type| Mandatory| Description | 606| --------------------- | -------- | ---- | ------------------------------------------------------------ | 607| value | number | Yes | Index of the item to be scrolled to in the container.<br>**NOTE**<br>If the value set is a negative value or greater than the maximum index of the items in the container, the value is deemed abnormal, and no scrolling will be performed. | 608| smooth | boolean | No | Whether to enable the smooth animation for scrolling to the item with the specified index. The value **true** means to enable that the smooth animation, and **false** means the opposite.<br>Default value: **false**| 609| align | [ScrollAlign](#scrollalign10) | No | How the list item to scroll to is aligned with the container.<br>Default value when the container is **List**: **ScrollAlign.START**<br> Default value when the container is **Grid**: **ScrollAlign.AUTO**<br> Default value when the container is **WaterFlow**: **ScrollAlign.START**<br>**NOTE**<br>This parameter is only available for the **List**, **Grid**, and **WaterFlow** components.| 610| options<sup>12+</sup> | [ScrollToIndexOptions](#scrolltoindexoptions12) | No | Options for scrolling to a specified index, for example, an extra offset for the scroll.<br>Default value: **0**, in vp| 611 612### scrollBy<sup>9+</sup> 613 614scrollBy(dx: Length, dy: Length) 615 616 617Scrolls by the specified amount. 618 619 620> **NOTE** 621> 622> This API is available for the **Scroll**, **List**, **Grid**, and **WaterFlow** components. 623 624**Atomic service API**: This API can be used in atomic services since API version 11. 625 626**System capability**: SystemCapability.ArkUI.ArkUI.Full 627 628**Parameters** 629 630| Name | Type | Mandatory | Description | 631| ----- | ------ | ---- | ----------------- | 632| dx | [Length](ts-types.md#length) | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.| 633| dy | [Length](ts-types.md#length) | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.| 634 635### isAtEnd<sup>10+</sup> 636 637isAtEnd(): boolean 638 639Checks whether the component has scrolled to the bottom. 640 641> **NOTE** 642> 643> This API is available for the **Scroll**, **List**, **Grid**, and **WaterFlow** components. 644 645**Atomic service API**: This API can be used in atomic services since API version 11. 646 647**System capability**: SystemCapability.ArkUI.ArkUI.Full 648 649**Return value** 650 651| Type | Description | 652| ------- | -------- | 653| boolean | The value **true** means that the component has scrolled to the bottom, and **false** means the opposite.| 654 655### getItemRect<sup>11+</sup> 656 657getItemRect(index: number): RectResult 658 659Obtains the size and position of a child component. 660 661> **NOTE** 662> 663> This API is available for the **Scroll**, **List**, **Grid**, and **WaterFlow** components. 664 665**Atomic service API**: This API can be used in atomic services since API version 12. 666 667**System capability**: SystemCapability.ArkUI.ArkUI.Full 668 669**Parameters** 670 671| Name | Type | Mandatory | Description | 672| ----- | ------ | ---- | ----------------- | 673| index | number | Yes | Index of the target child component.| 674 675> **NOTE** 676> 677> - The value of **index** must be the index of a child component visible in the display area. Otherwise, the value is considered invalid. 678> - The size and position returned for an invalid value are both **0**. 679 680**Return value** 681 682| Type | Description | 683| ------------------- | -------- | 684| [RectResult](ts-types.md#rectresult10) | Size and position of the child component relative to the component.<br>Unit: vp| 685 686**Error codes** 687 688For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md). 689 690| ID| Error Message| 691| ------- | -------- | 692| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 693| 100004 | Controller not bound to component. | 694 695## OffsetResult<sup>11+</sup> 696 697**Atomic service API**: This API can be used in atomic services since API version 11. 698 699**System capability**: SystemCapability.ArkUI.ArkUI.Full 700 701| Name | Type | Read Only| Optional| Description | 702| ------- |------- | ---- | ---- | -------------------------------- | 703| xOffset | number | No | No | Horizontal scrolling offset.<br>The unit of the return value is vp.| 704| yOffset | number | No | No | Vertical scrolling offset.<br>The unit of the return value is vp.| 705 706## ScrollAnimationOptions<sup>12+</sup> 707 708**Atomic service API**: This API can be used in atomic services since API version 12. 709 710**System capability**: SystemCapability.ArkUI.ArkUI.Full 711 712| Name | Type | Mandatory | Description | 713| ----- | ------ | ------ | ----------------- | 714| duration | number | No| Scrolling duration.<br>Default value: **1000**<br>**NOTE**<br>A value less than 0 evaluates to the default value.| 715| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../js-apis-curve.md#icurve9)<sup>9+ </sup> | No| Scrolling curve.<br>Default value: **Curve.Ease**| 716| canOverScroll | boolean | No| Whether to enable overscroll.<br>Default value: **false**<br>**NOTE**<br> Scrolling can exceed the boundary and initiate a bounce animation when this parameter is set to **true**, and the component's **edgeEffect** attribute is set to [EdgeEffect.Spring](ts-appendix-enums.md#edgeeffect).| 717 718## ScrollAlign<sup>10+</sup> 719 720**Atomic service API**: This API can be used in atomic services since API version 11. 721 722**System capability**: SystemCapability.ArkUI.ArkUI.Full 723 724| Name | Description | 725| ------ | ------------------------------ | 726| START | The start edge of the list item is flush with the start edge of the list. | 727| CENTER | The list item is centered along the main axis of the list. | 728| END | The end edge of the list item is flush with the end edge of the list.| 729| AUTO | The list item is automatically aligned.<br>If the list item is fully contained within the display area, no adjustment is performed. Otherwise, the list item is aligned so that its start or end edge is flush with the start or end edge of the list, whichever requires a shorter scrolling distance.| 730 731## ScrollToIndexOptions<sup>12+</sup> 732 733**Atomic service API**: This API can be used in atomic services since API version 12. 734 735**System capability**: SystemCapability.ArkUI.ArkUI.Full 736 737| Name | Type | Mandatory| Description | 738| ----- | ------ | ------ | ----------------- | 739| extraOffset | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No| Extra offset for scrolling to a specified index.| 740 741## ScrollPageOptions<sup>12+</sup> 742 743**Atomic service API**: This API can be used in atomic services since API version 12. 744 745**System capability**: SystemCapability.ArkUI.ArkUI.Full 746 747| Name | Type| Mandatory| Description | 748| --------- | -------- | ---- | ------------------------------------------------------------ | 749| 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. | 750| animation | boolean | No | Whether to enable the page-turning animation. The value **true** means to enable the page-turning animation, and **false** means the opposite.<br>Default value: **false**| 751 752## OffsetOptions<sup>12+</sup> 753 754**Atomic service API**: This API can be used in atomic services since API version 12. 755 756**System capability**: SystemCapability.ArkUI.ArkUI.Full 757 758| Name | Type | Mandatory| Description | 759| ----- | ------| ------- | ----------------- | 760| xOffset | [Dimension](ts-types.md#dimension10) | No|Horizontal scrolling offset.<br>Default value: **0**| 761| yOffset | [Dimension](ts-types.md#dimension10) | No|Vertical scrolling offset.<br>Default value: **0**| 762 763## ScrollEdgeOptions<sup>12+</sup> 764 765**Atomic service API**: This API can be used in atomic services since API version 12. 766 767**System capability**: SystemCapability.ArkUI.ArkUI.Full 768 769| Name | Type| Mandatory| Description | 770| --------- | -------- | ---- | ------------------------------------------------------------ | 771| velocity | number | No | Fixed velocity for scrolling to the edge of the container. If the value specified is less than or equal to 0, the parameter will not take effect.<br>Default value: **0**<br> Unit: vp/s | 772 773## Example 774### Example 1 775 776```ts 777// xxx.ets 778import { curves } from '@kit.ArkUI' 779 780@Entry 781@Component 782struct ScrollExample { 783 scroller: Scroller = new Scroller() 784 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 785 786 build() { 787 Stack({ alignContent: Alignment.TopStart }) { 788 Scroll(this.scroller) { 789 Column() { 790 ForEach(this.arr, (item: number) => { 791 Text(item.toString()) 792 .width('90%') 793 .height(150) 794 .backgroundColor(0xFFFFFF) 795 .borderRadius(15) 796 .fontSize(16) 797 .textAlign(TextAlign.Center) 798 .margin({ top: 10 }) 799 }, (item: string) => item) 800 }.width('100%') 801 } 802 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 803 .scrollBar(BarState.On) // The scrollbar is always displayed. 804 .scrollBarColor(Color.Gray) // The scrollbar color is gray. 805 .scrollBarWidth(10) // The scrollbar width is 10. 806 .friction(0.6) 807 .edgeEffect(EdgeEffect.None) 808 .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { 809 console.info(xOffset + ' ' + yOffset) 810 }) 811 .onScrollEdge((side: Edge) => { 812 console.info('To the edge') 813 }) 814 .onScrollStop(() => { 815 console.info('Scroll Stop') 816 }) 817 818 Button('scroll 150') 819 .height('5%') 820 .onClick(() => { // Click to scroll down by 150.0 vp. 821 this.scroller.scrollBy(0, 150) 822 }) 823 .margin({ top: 10, left: 20 }) 824 Button('scroll 100') 825 .height('5%') 826 .onClick(() => { // Click to scroll down by 100.0 vp. 827 const yOffset: number = this.scroller.currentOffset().yOffset; 828 this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100 }) 829 }) 830 .margin({ top: 60, left: 20 }) 831 Button('scroll 100') 832 .height('5%') 833 .onClick(() => {// Click to scroll down by 100.0 vp. An animation is applied to the scrolling. 834 let curve = curves.interpolatingSpring(10, 1, 228, 30) // Create a step curve. 835 const yOffset: number = this.scroller.currentOffset().yOffset; 836 this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100, animation: { duration: 1000, curve: curve } }) 837 }) 838 .margin({ top: 110, left: 20 }) 839 Button('back top') 840 .height('5%') 841 .onClick(() => { // Click to go back to the top. 842 this.scroller.scrollEdge(Edge.Top) 843 }) 844 .margin({ top: 160, left: 20 }) 845 Button('next page') 846 .height('5%') 847 .onClick(() => { // Click to go to the next page. 848 this.scroller.scrollPage({ next: true ,animation: true }) 849 }) 850 .margin({ top: 210, left: 20 }) 851 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 852 } 853} 854``` 855 856 857 858### Example 2 859```ts 860@Entry 861@Component 862struct NestedScroll { 863 @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list. 864 private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 865 private scrollerForScroll: Scroller = new Scroller() 866 private scrollerForList: Scroller = new Scroller() 867 868 build() { 869 Flex() { 870 Scroll(this.scrollerForScroll) { 871 Column() { 872 Text("Scroll Area") 873 .width("100%") 874 .height("40%") 875 .backgroundColor(0X330000FF) 876 .fontSize(16) 877 .textAlign(TextAlign.Center) 878 .onClick(() => { 879 this.scrollerForList.scrollToIndex(5) 880 }) 881 882 List({ space: 20, scroller: this.scrollerForList }) { 883 ForEach(this.arr, (item: number) => { 884 ListItem() { 885 Text("ListItem" + item) 886 .width("100%") 887 .height("100%") 888 .borderRadius(15) 889 .fontSize(16) 890 .textAlign(TextAlign.Center) 891 .backgroundColor(Color.White) 892 }.width("100%").height(100) 893 }, (item: string) => item) 894 } 895 .width("100%") 896 .height("50%") 897 .edgeEffect(EdgeEffect.None) 898 .friction(0.6) 899 .onReachStart(() => { 900 this.listPosition = 0 901 }) 902 .onReachEnd(() => { 903 this.listPosition = 2 904 }) 905 .onScrollFrameBegin((offset: number) => { 906 if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) { 907 this.scrollerForScroll.scrollBy(0, offset) 908 return { offsetRemain: 0 } 909 } 910 this.listPosition = 1 911 return { offsetRemain: offset }; 912 }) 913 914 Text("Scroll Area") 915 .width("100%") 916 .height("40%") 917 .backgroundColor(0X330000FF) 918 .fontSize(16) 919 .textAlign(TextAlign.Center) 920 } 921 } 922 .width("100%").height("100%") 923 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) 924 } 925} 926``` 927 928 929 930### Example 3 931```ts 932@Entry 933@Component 934struct StickyNestedScroll { 935 @State arr: number[] = [] 936 937 @Styles 938 listCard() { 939 .backgroundColor(Color.White) 940 .height(72) 941 .width("100%") 942 .borderRadius(12) 943 } 944 945 build() { 946 Scroll() { 947 Column() { 948 Text("Scroll Area") 949 .width("100%") 950 .height("40%") 951 .backgroundColor('#0080DC') 952 .textAlign(TextAlign.Center) 953 Tabs({ barPosition: BarPosition.Start }) { 954 TabContent() { 955 List({ space: 10 }) { 956 ForEach(this.arr, (item: number) => { 957 ListItem() { 958 Text("item" + item) 959 .fontSize(16) 960 }.listCard() 961 }, (item: string) => item) 962 }.width("100%") 963 .edgeEffect(EdgeEffect.Spring) 964 .nestedScroll({ 965 scrollForward: NestedScrollMode.PARENT_FIRST, 966 scrollBackward: NestedScrollMode.SELF_FIRST 967 }) 968 }.tabBar("Tab1") 969 970 TabContent() { 971 }.tabBar("Tab2") 972 } 973 .vertical(false) 974 .height("100%") 975 }.width("100%") 976 } 977 .edgeEffect(EdgeEffect.Spring) 978 .friction(0.6) 979 .backgroundColor('#DCDCDC') 980 .scrollBar(BarState.Off) 981 .width('100%') 982 .height('100%') 983 } 984 985 aboutToAppear() { 986 for (let i = 0; i < 30; i++) { 987 this.arr.push(i) 988 } 989 } 990} 991``` 992 993### Example 4 994```ts 995@Entry 996@Component 997struct Index { 998 scroller: Scroller = new Scroller; 999 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 1000 build() { 1001 Scroll(this.scroller) { 1002 Column() { 1003 ForEach(this.arr, (item: number) => { 1004 Text(item.toString()) 1005 .width('90%') 1006 .height(200) 1007 .backgroundColor(0xFFFFFF) 1008 .borderWidth(1) 1009 .borderColor(Color.Black) 1010 .borderRadius(15) 1011 .fontSize(16) 1012 .textAlign(TextAlign.Center) 1013 }, (item: string) => item) 1014 }.width('100%').backgroundColor(0xDCDCDC) 1015 } 1016 .backgroundColor(Color.Yellow) 1017 .height('100%') 1018 .edgeEffect(EdgeEffect.Spring) 1019 .scrollSnap({snapAlign:ScrollSnapAlign.START, snapPagination:400, enableSnapToStart:true, enableSnapToEnd:true}) 1020 } 1021} 1022``` 1023 1024 1025### Example 5 1026```ts 1027@Entry 1028@Component 1029// The fling function performs inertial scrolling based on the initial velocity passed in. 1030struct ListExample { 1031 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 1032 scrollerForList: Scroller = new Scroller() 1033 build() { 1034 Column() { 1035 Button('Fling-1000') 1036 .height('5%') 1037 .onClick(() => { 1038 this.scrollerForList.fling(-1000) 1039 }) 1040 Button('Fling3000') 1041 .height('5%') 1042 .onClick(() => { 1043 this.scrollerForList.fling(3000) 1044 }) 1045 List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) { 1046 ForEach(this.arr, (item: number) => { 1047 ListItem() { 1048 Text('' + item) 1049 .width('100%').height(100).fontSize(16) 1050 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 1051 } 1052 }, (item: string) => item) 1053 } 1054 .listDirection(Axis.Vertical) // Arrangement direction 1055 .scrollBar(BarState.Off) 1056 .friction(0.9) 1057 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider 1058 .edgeEffect(EdgeEffect.Spring) // Set the edge scrolling effect to Spring. 1059 .width('90%') 1060 } 1061 .width('100%') 1062 .height('100%') 1063 .backgroundColor(0xDCDCDC) 1064 .padding({ top: 5 }) 1065 } 1066} 1067``` 1068 1069 1070 1071### Example 6 1072This example implements scrolling to the bottom edge of the **Scroll** component at a velocity of 700 vp/s. 1073 1074```ts 1075// xxx.ets 1076@Entry 1077@Component 1078struct ScrollExample { 1079 scroller: Scroller = new Scroller() 1080 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 1081 1082 build() { 1083 Stack({ alignContent: Alignment.TopStart }) { 1084 Scroll(this.scroller) { 1085 Column() { 1086 ForEach(this.arr, (item: number) => { 1087 Text(item.toString()) 1088 .width('90%') 1089 .height(150) 1090 .backgroundColor(0xFFFFFF) 1091 .borderRadius(15) 1092 .fontSize(16) 1093 .textAlign(TextAlign.Center) 1094 .margin({ top: 10 }) 1095 }, (item: string) => item) 1096 }.width('100%') 1097 } 1098 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 1099 .scrollBar(BarState.On) // The scrollbar is always displayed. 1100 .scrollBarColor(Color.Gray) // The scrollbar color is gray. 1101 .scrollBarWidth(10) // The scrollbar width is 10. 1102 .friction(0.6) 1103 .edgeEffect(EdgeEffect.None) 1104 .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { 1105 console.info(xOffset + ' ' + yOffset) 1106 }) 1107 .onScrollEdge((side: Edge) => { 1108 console.info('To the edge') 1109 }) 1110 .onScrollStop(() => { 1111 console.info('Scroll Stop') 1112 }) 1113 1114 Button('scroll to bottom 700') 1115 .height('5%') 1116 .onClick(() => {// After the button is clicked, the component scrolls to the bottom edge at a velocity of 700 vp/s. 1117 this.scroller.scrollEdge(Edge.Bottom, { velocity: 700 }) 1118 }) 1119 .margin({ top: 100, left: 20 }) 1120 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 1121 } 1122} 1123``` 1124 1125 1126
