HarmonyOS鸿蒙Next中Web组件内容过长，底部的内容无法滑动联动怎么处理

【问题现象】

问题一： Web组件嵌套在Scroll组件内，当Web组件内容滚动时，Web组件底部的Text组件无法联动滚动。Web组件高度100%，Web组件内容滑动到底部后，下面的Text组件文字1、文字2、文字3可以跟着滑出来；但是再往上滑的时候，文字就固定在底部不动了，直到滚动到顶部后才滚动。预期效果是往上滑的时候文字先滚动，Web内容后滚动。

问题二： 布局有问题，底部固定栏文字超出屏幕范围被截断。

图片示例：

代码如下：

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebScrollDemo {
  controller: WebviewController = new web_webview.WebviewController()
  private scrollerForScroll: Scroller = new Scroller()

  build() {
    Column() {
      Text('标题')

      Scroll(this.scrollerForScroll) {
        Column() {
          Text('下面是web组件')

          Web({ src: 'https://developer.huawei.com/consumer/cn/notice/20241010/', controller: this.controller })
            .height('100%')

          Text('文字1')
          Text('文字2')
          Text('文字3')
        }
      }
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)

      Text('底部固定栏')
    }
  }
}

【背景知识】

Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

Web：用于在应用程序中显示Web页面内容的组件，当Web页面内容超过Web组件的尺寸时，内容可以滚动。

【定位思路】

【问题一】 根据问题描述，当向底部滚动时，Web组件内容先滚动，然后是Scroll组件的内容——Column组件整体滚动；当回滚时，也是Web组件内容先滚动，然后是Column组件整体滚动。然而想要实现的效果是：回滚时先Column组件整体滚动，再让Web组件内容滚动，那么怎样才能改变这个滚动优先级？即当两个可滚动组件嵌套时，如何控制父子组件的滚动优先级？搜索官方文档，可以看到可滚动组件都有这样一个属性—nestedScroll：设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。可以分别设置scrollForward和scrollBackward选项，分别是滚动组件往末尾端滚动、往起始端滚动时的嵌套滚动选项。

可以设置的类型有：

• SELF_ONLY：只自身滚动，不与父组件联动。
• SELF_FIRST（默认值）：自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。
• PARENT_FIRST：父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。
• PARALLEL：自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果。

可以发现，问题现象对应的nestedScroll设置和默认值一致，不论是往哪个方向滚动，都是子组件Web先滚动。

【问题二】 布局问题，首先分析组件的层级结构：

有一个隐含的知识，当未指定高度时，Column、Scroll组件的默认高度、宽度均是100%。所以Scroll组件和“标题文字”已经占据了全部屏幕内容控件，导致“底部固定栏文字”的位置超过了屏幕内容区域范围，都到了导航栏位置区域。

【解决方案】

问题一： 要实现预期效果，只需要主动设置nestedScroll的scrollBackward属性值为PARENT_FIRST。

问题二： 尺寸设置中有一个layoutWeight属性可以实现高度自适应效果（父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间），这里给Scroll组件设置layoutWeight(1)，即可自适应高度（父组件高度减去上下两个Text组件的高度）。

示例代码：

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct NewsDetail{
  controller: WebviewController = new web_webview.WebviewController()
  private scrollerForScroll: Scroller = new Scroller()

  build() {
    Column() {
      Text('标题')
      Scroll(this.scrollerForScroll) {
        Column() {
          Text('下面是web组件')
          Web({ src: 'https://developer.huawei.com/consumer/cn/notice/20241010/', controller: this.controller })
            .nestedScroll({scrollForward:NestedScrollMode.SELF_FIRST,scrollBackward: NestedScrollMode.PARENT_FIRST})
            .height('100%')
          Text('文字1')
          Text('文字2')
          Text('文字3')
        }
      }
      .scrollBar(BarState.Off)
      .layoutWeight(1)
      .scrollable(ScrollDirection.Vertical)
      Text("底部固定栏")
    }
  }
}

最终效果如下：