1# ScrollBar 2 3The **\<ScrollBar>** is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component can contain a single child component. 13 14 15## APIs 16 17ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState }) 18 19**Parameters** 20 21| Name| Type| Mandatory| Description| 22| -------- | -------- | -------- | -------- | 23| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| Scroller, which can be bound to scrollable components.| 24| direction | [ScrollBarDirection](#scrollbardirection) | No| Scrollbar direction in which scrollable components scroll.<br>Default value: **ScrollBarDirection.Vertical**| 25| state | [BarState](ts-appendix-enums.md#barstate) | No| Scrollbar state.<br>Default value: **BarState.Auto**| 26 27> **NOTE** 28> 29> The **\<ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar. 30> 31> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa. 32 33## ScrollBarDirection 34 35| Name| Description| 36| -------- | -------- | 37| Vertical | Vertical scrollbar.| 38| Horizontal | Horizontal scrollbar.| 39 40 41## Example 42 43```ts 44// xxx.ets 45@Entry 46@Component 47struct ScrollBarExample { 48 private scroller: Scroller = new Scroller() 49 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 50 51 build() { 52 Column() { 53 Stack({ alignContent: Alignment.End }) { 54 Scroll(this.scroller) { 55 Flex({ direction: FlexDirection.Column }) { 56 ForEach(this.arr, (item) => { 57 Row() { 58 Text(item.toString()) 59 .width('80%') 60 .height(60) 61 .backgroundColor('#3366CC') 62 .borderRadius(15) 63 .fontSize(16) 64 .textAlign(TextAlign.Center) 65 .margin({ top: 5 }) 66 } 67 }, item => item) 68 }.margin({ right: 15 }) 69 } 70 .width('90%') 71 .scrollBar(BarState.Off) 72 .scrollable(ScrollDirection.Vertical) 73 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { 74 Text() 75 .width(20) 76 .height(100) 77 .borderRadius(10) 78 .backgroundColor('#C0C0C0') 79 }.width(20).backgroundColor('#ededed') 80 } 81 } 82 } 83} 84``` 85 86 87 88
