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

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)
}