HarmonyOS 如果有两个元素，一个元素覆盖到另一个元素上，如何做到点击上面的元素触发下面的元素？

Question

类似前端web css的pointer-events属性，目前通过Stack实现B元素覆盖到A元素上，禁止B元素滑动（设置了enabled(false)），可否直接触发A元素的滑动事件，目前因为B元素覆盖了导致AB元素都无法滑动。

Stack({ alignContent: Alignment.BottomStart }) {
  Scroll() {
    Row() {}.height(2000)
  }.width('20%'),
  Scroll() {
    Row() {}.height(2000)
  }.width('100%'),
})

Answer 1

请参考如下demo:

Stack({ alignContent: Alignment.BottomStart }) {
  Scroll(this.scroller) {
    Column({space: 20}){
      Text("名称1").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Pink).height(2000)
  }.border({width:5}).borderColor(Color.Pink).width('100%')
  .hitTestBehavior(HitTestMode.Block)
  .onScroll((x: number , y: number) => {
    this.scroller1.scrollTo({
      yOffset: this.scroller.currentOffset().yOffset,
      xOffset: x
    })

  })
  Scroll(this.scroller1) {
    Column({space: 20}){
      Text("名称2").height(100).backgroundColor(Color.Gray).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
      Text("123234").height(200).width(190)
      Text("wwer").height(200).width(190)
    }.alignItems(HorizontalAlign.Start).backgroundColor(Color.Orange).height(2000)
  }.width('20%').border({width:5}).borderColor(Color.Orange).hitTestBehavior(HitTestMode.Transparent)
  .onScroll((x: number , y: number) => {
    this.scroller.scrollTo({
      yOffset: this.scroller1.currentOffset().yOffset,
      xOffset: x
    })
  })
}