如何自定义滚动条的样式？

private arr: number[] = []
private scroller: Scroller = new Scroller()
aboutToAppear(): void {
  for (let index = 0; index < 50; index++) {
    this.arr.push(index)
  }
}
build() {
  Column({ space: 15 }) {
    Stack({ alignContent: Alignment.End }) {
      Scroll(this.scroller) {
        Flex({ direction: FlexDirection.Column }) {
          ForEach(this.arr, (e: number) => {
            Text(e.toString())
              .width('80%')
              .height(60)
              .backgroundColor("#8B8B8B")
              .fontSize(20)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .margin({ top: 5 })
          })
        }
      }.width("100%")
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)

      ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) {
        Text()
          .width(20)
          .height(100)
          .borderRadius(10)
          .backgroundColor(Color.Orange)
      }.width(20).backgroundColor('#ededed')
    }.width("100%")
  }.width('100%')
  .height("100%")
  .justifyContent(FlexAlign.Center)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.