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

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

怎么监听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%')
 }
}