本问答帖原创发布在华为开发者联盟社区 ，欢迎开发者前往论坛提问交流。

更多与该问题相关的讨论，请点击原帖查看：

怎么监听Scroll的滑动百分比，想关联Progress进度条-华为开发者问答 | 华为开发者联盟 (huawei.com)

问题描述：

如何监听Scroll的滑动百分比？ 

解决方案：

【背景知识】

在HarmonyOS中，onWillScroll和onDidScroll是滚动容器组件（如Scroll）的两个关键事件回调接口。

onWillScroll在滚动行为‌即将发生前‌触发，属于滚动流程的‌前置回调‌，主要用于滚动行为的前置拦截‌（例如通过返回值控制是否允许滚动）。

onDidScroll‌在滚动行为‌完成一帧滑动后‌触发，属于滚动流程的‌后置回调‌，用于监听当前帧滑动的偏移量和当前滑动状态。

【解决方案】

使用onDidScroll‌或onWillScroll都可实现监听滚动，参考滚动监听。如下demo为使用onDidScroll监听滚动：

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State tabArray: Array<number> = [0, 1, 2, 3, 4]
  @State value: number = 0
  private scroller: Scroller = new Scroller()
  totalHeight: number = 0
  scrollHeight: number = 0

  aboutToAppear(): void {
    this.totalHeight = 200 * 5
    this.scrollHeight = 600
  }

  build() {
    Column() {
      Column() {
        Progress({ value: 0, total: this.totalHeight - this.scrollHeight, type: ProgressType.Linear })
          .color(Color.Blue)
          .value(this.value)
          .width(300)
          .height(20)
      }.height(100).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)

      Scroll(this.scroller) {
        Column() {
          ForEach(this.tabArray, (item: number) => {
            ListItem() {
              Column() {
                Text("页签" + item + "_111111").fontSize(40)
                Text("页签" + item + "_222222").fontSize(40)
                Text("页签" + item + "_333333").fontSize(40)
              }.width("100%")
              .height(200)
              .backgroundColor(Color.Gray)
            }
          }, (item: string) => item)
        }.width("100%")
      }
      .scrollable(ScrollDirection.Vertical)
      .edgeEffect(EdgeEffect.None)
      .onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
        this.value += yOffset
        console.info("this.value = " + this.value)
      })
      .height(this.scrollHeight)
    }
    .height('100%')
    .width('100%')
  }
}