HarmonyOS 监听List组件滑动

想要实现滚动List列表，顶部导航背景色透明度渐变效果，通过onDidScroll（）实现，代码如下：

List({ space: 10, scroller: this.listScroller }) {
  ListItemGroup() {
    ListItem() {

    }
    .width('100%')
    .height(100)
  }

  ListItemGroup({ header: this.itemHead('A') }) {
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .borderRadius(6)
  // .width(px2vp(display.getDefaultDisplaySync().width)-28)

  ListItemGroup({ header: this.itemHead('B') }) {
    // 循环渲染分组B的ListItem
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .backgroundColor(Color.White)
  .borderRadius(6)
  .width(px2vp(display.getDefaultDisplaySync().width)-28)
  .margin({ left: 14, right: 14 })

  ListItemGroup({ header: this.itemHead('B') }) {
    // 循环渲染分组B的ListItem
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .backgroundColor(Color.White)
  .borderRadius(6)
  .width(px2vp(display.getDefaultDisplaySync().width)-28)
  .margin({ left: 14, right: 14 })
}
.width(LUCCUIConstants.LUCCUI_FULL_SIZE)
.height(LUCCUIConstants.LUCCUI_FULL_SIZE)
.backgroundColor(Color.Transparent)
.scrollBar(BarState.Off)
.alignListItem(ListItemAlign.Start)
.onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
  this.imageOffsetY = scrollOffset
  if (scrollOffset > 0 && scrollOffset < 50) {
    this.naviModel.bgOpacity = scrollOffset/50.0
  } else {
    this.naviModel.bgOpacity = scrollOffset<=0 ? 0 : 1
  }
})

发现效果不对