1# ScrollBar
2
3滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
4
5>  **说明：**
6>
7>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含单个子组件。
13
14
15## 接口
16
17ScrollBar(value: ScrollBarOptions)
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名 | 类型 | 必填 | 说明 |
26| -------- | -------- | -------- | -------- |
27| value |  [ScrollBarOptions](#scrollbaroptions对象说明)| 是 | 滚动条组件参数。 |
28
29## 属性
30
31除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
32
33## enableNestedScroll<sup>14+</sup>
34
35enableNestedScroll(value: boolean)
36
37设置滚动条是否嵌套滚动。
38
39**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。
40
41**系统能力：** SystemCapability.ArkUI.ArkUI.Full
42
43**参数：** 
44
45| 参数名 | 类型    | 必填 | 说明                                  |
46| ------ | ------- | ---- | ------------------------------------- |
47| value  | boolean | 是   | 是否执行嵌套滚动。设置为true执行嵌套滚动，设置为false不嵌套滚动。 <br/>默认值：false |
48
49## ScrollBarOptions对象说明
50
51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
52
53**系统能力：** SystemCapability.ArkUI.ArkUI.Full
54
55| 名称 | 类型 | 必填 | 说明 |
56| -------- | -------- | -------- | -------- |
57| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
58| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical |
59| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值：BarState.Auto |
60
61>  **说明：**
62>
63> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
64> 
65> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
66>
67> 从API version 12开始，ScrollBar组件没有子节点时，支持显示默认样式的滚动条。
68
69## ScrollBarDirection枚举说明
70
71**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
72
73**系统能力：** SystemCapability.ArkUI.ArkUI.Full
74
75| 名称 | 说明 |
76| -------- | -------- |
77| Vertical | 纵向滚动条。 |
78| Horizontal | 横向滚动条。 |
79
80
81## 示例1
82
83该示例为ScrollBar组件有子节点时的滚动条样式。
84
85```ts
86// xxx.ets
87@Entry
88@Component
89struct ScrollBarExample {
90  private scroller: Scroller = new Scroller()
91  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
92
93  build() {
94    Column() {
95      Stack({ alignContent: Alignment.End }) {
96        Scroll(this.scroller) {
97          Flex({ direction: FlexDirection.Column }) {
98            ForEach(this.arr, (item: number) => {
99              Row() {
100                Text(item.toString())
101                  .width('80%')
102                  .height(60)
103                  .backgroundColor('#3366CC')
104                  .borderRadius(15)
105                  .fontSize(16)
106                  .textAlign(TextAlign.Center)
107                  .margin({ top: 5 })
108              }
109            }, (item:number) => item.toString())
110          }.margin({ right: 15 })
111        }
112        .width('90%')
113        .scrollBar(BarState.Off)
114        .scrollable(ScrollDirection.Vertical)
115        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
116          Text()
117            .width(20)
118            .height(100)
119            .borderRadius(10)
120            .backgroundColor('#C0C0C0')
121        }.width(20).backgroundColor('#ededed')
122      }
123    }
124  }
125}
126```
127
128
129![zh-cn_image_0000001232775585](figures/zh-cn_image_0000001232775585.gif)
130
131## 示例2
132
133该示例为ScrollBar组件没有子节点时的滚动条样式。
134
135```ts
136@Entry
137@Component
138struct ScrollBarExample {
139  private scroller: Scroller = new Scroller()
140  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
141
142  build() {
143    Column() {
144      Stack({ alignContent: Alignment.End }) {
145        Scroll(this.scroller) {
146          Flex({ direction: FlexDirection.Column }) {
147            ForEach(this.arr, (item: number) => {
148              Row() {
149                Text(item.toString())
150                  .width('80%')
151                  .height(60)
152                  .backgroundColor('#3366CC')
153                  .borderRadius(15)
154                  .fontSize(16)
155                  .textAlign(TextAlign.Center)
156                  .margin({ top: 5 })
157              }
158            }, (item:number) => item.toString())
159          }.margin({ right: 15 })
160        }
161        .width('90%')
162        .scrollBar(BarState.Off)
163        .scrollable(ScrollDirection.Vertical)
164        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto })
165      }
166    }
167  }
168}
169```
170
171
172![zh-cn_image_scrollbar](figures/zh-cn_image_scrollbar.gif)
173
174## 示例3
175
176该示例为ScrollBar组件支持嵌套滚动的样式。
177```ts
178@Entry
179@Component
180struct StickyNestedScroll {
181  listScroller: Scroller = new Scroller();
182  @State array: number[] = []
183
184  @Styles
185  listCard() {
186    .backgroundColor(Color.White)
187    .height(72)
188    .width("100%")
189    .borderRadius(12)
190  }
191
192  build() {
193    Stack() {
194      Scroll() {
195        Column() {
196          Text('Scroll Area')
197            .width("100%")
198            .height("40%")
199            .backgroundColor('#0080DC')
200            .textAlign(TextAlign.Center)
201          List({ space: 10, scroller: this.listScroller }) {
202            ForEach(this.array, (item: number) => {
203              ListItem() {
204                Text('item' + item)
205                  .fontSize(16)
206              }
207              .listCard()
208            }, (item: string) => item)
209          }
210          .scrollBar(BarState.Off)
211          .nestedScroll({
212            scrollForward: NestedScrollMode.PARENT_FIRST,
213            scrollBackward: NestedScrollMode.SELF_FIRST
214          })
215          .height("100%")
216        }
217        .width("100%")
218      }
219      .edgeEffect(EdgeEffect.Spring)
220      .backgroundColor('#DCDCDC')
221      .scrollBar(BarState.Off)
222      .width('100%')
223      .height('100%')
224      ScrollBar({ scroller: this.listScroller})
225        .position({right:0})
226        .enableNestedScroll(true)
227    }
228  }
229
230  aboutToAppear() {
231    for (let i = 0; i < 15; i++) {
232      this.array.push(i)
233    }
234  }
235}
236```
237![EnableNestedScroll](figures/EnableNestedScroll.gif)