1# ArcScrollBar 2 3The **ArcScrollBar** component is designed to be used together with scrollable components such as [ArcList](ts-container-arclist.md), [List](ts-container-list.md), [Grid](ts-container-grid.md), [Scroll](ts-container-scroll.md), and [WaterFlow](ts-container-waterflow.md) to provide a circular scrollbar. 4 5> **NOTE** 6> 7> - This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8> - When the width and height of the **ArcScrollBar** component are not set, the **maxSize** value in the [layout constraint](../js-apis-arkui-frameNode.md#layoutconstraint12) of its parent component is used as the width and height. If the parent component of the **ArcScrollBar** component contains scrollable components, such as [ArcList](ts-container-arclist.md), [List](ts-container-list.md), [Grid](ts-container-grid.md), [Scroll](ts-container-scroll.md), or [WaterFlow](ts-container-waterflow.md), you are advised to set the width and height of the **ArcScrollBar** component. Otherwise, the width and height of the component may be infinite. 9 10 11## Child Components 12 13Not supported 14 15## APIs 16 17ArcScrollBar(options: ArcScrollBarOptions) 18 19Creates an instance of the **ArcScrollBar** component. 20 21**Atomic service API**: This API can be used in atomic services since API version 18. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Circle 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| options | [ArcScrollBarOptions](#arcscrollbaroptions)| Yes| Parameters of the **ArcScrollBar** component.| 30 31## ArcScrollBarOptions 32 33Represents the parameters used to construct an **ArcScrollBar** component. 34 35**Atomic service API**: This API can be used in atomic services since API version 18. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Circle 38 39| Name| Type| Mandatory| Description| 40| -------- | -------- | -------- | -------- | 41| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| Scroller, which can be bound to scrollable components for scrolling control.| 42| state | [BarState](ts-appendix-enums.md#barstate) | No| State of the scrollbar.<br>Default value: **BarState.Auto**| 43 44> **NOTE** 45> 46> **ArcScrollBar** must be bound to a scrollable component through **scroller** to achieve synchronization. Only a one-to-one binding is allowed between **ArcScrollBar** and a scrollable component. 47 48## Example 49 50This example demonstrates how to use **ArcScrollBar** with a **Scroll** component to create an external circular scrollbar. 51 52```ts 53import { ArcScrollBar } from '@kit.ArkUI'; 54 55@Entry 56@Component 57struct ArcScrollBarExample { 58 private scroller: Scroller = new Scroller() 59 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 60 61 build() { 62 Stack({ alignContent: Alignment.Center }) { 63 Scroll(this.scroller) { 64 Flex({ direction: FlexDirection.Column }) { 65 ForEach(this.arr, (item: number) => { 66 Row() { 67 Text(item.toString()) 68 .width('80%') 69 .height(60) 70 .backgroundColor('#3366CC') 71 .borderRadius(15) 72 .fontSize(16) 73 .textAlign(TextAlign.Center) 74 .margin({ top: 5 }) 75 } 76 }, (item: number) => item.toString()) 77 }.margin({ right: 15 }) 78 } 79 .width('90%') 80 .scrollBar(BarState.Off) 81 82 ArcScrollBar({ scroller: this.scroller, state: BarState.Auto }) 83 } 84 .width('100%') 85 .height('100%') 86 } 87} 88``` 89 90 91
