Scroll Priority Configuration for Nested Components within WebView

Read the original article：Scroll Priority Configuration for Nested Components within WebView

Scroll Priority Configuration for Nested Components within WebView

Requirement Description

When there are other components at the head and tail of the Web component within Scroll, the head component is only displayed when the Web content scrolls to the top, and the tail component is only displayed when the Web content scrolls to the bottom.

Background Knowledge

onVisibleAreaChange: This callback is triggered when the visible area of the component changes.
nestedScrollsets the nested scrolling mode in both directions to achieve scrolling linkage with the parent component.

Implementation Steps

By setting the onVisibleAreaChangecallback for the head and tail components: when the head or tail component is visible, set the scrolling priority of the Webto scroll the parent component first; when the head or tail component is not visible, set the scrolling priority of the Webto scroll itself first.

Code Snippet / Configuration

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ScrollerDemo {
  @State message: string = 'Hello World';
  scroller: Scroller = new Scroller();
  controller: webview.WebviewController = new webview.WebviewController();
  @State scrollMode: NestedScrollMode = NestedScrollMode.PARENT_FIRST

  build() {

    Scroll(this.scroller) {
      Column() {
        Column() {
          Text('Title')
            .fontSize(16)
            .fontWeight(600)
            .lineHeight(23)
            .textAlign(TextAlign.Start)
            .width('90%')
        }
        .width('100%').alignItems(HorizontalAlign.Start).margin({ top: 20, bottom: 24 })
        // Determine the change in visible area
        .onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {
          if (isExpanding && currentRatio > 0.0) {
            // When visible, set the scrolling priority of the Web to parent component scrolling first
            this.scrollMode = NestedScrollMode.PARENT_FIRST
          }
          if (!isExpanding && currentRatio <= 0.0) {
            // When not visible, set the web scrolling priority to self-first
            this.scrollMode = NestedScrollMode.SELF_FIRST
          }
        })

        Web({
          //Here, 'www.example.com' is used as an example only.
          src: 'www.example.com',
          controller: this.controller
        })
          .mixedMode(MixedMode.All)
          .domStorageAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(false)
          .fileAccess(true)
          .height('100%')
          .nestedScroll({
            scrollForward: this.scrollMode,
            scrollBackward: this.scrollMode
          })
        Row() {
          Text('Read Count: 12345').textAlign(TextAlign.End)
        }.height(40).alignItems(VerticalAlign.Center)
        // Determine changes in the visible area
        .onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {
          if (isExpanding && currentRatio > 0.0) {
            // When visible, set the Web scrolling priority to parent component scrolling first
            this.scrollMode = NestedScrollMode.PARENT_FIRST
          }
          if (!isExpanding && currentRatio <= 0.0) {
            // When not visible, set the web scrolling priority to self-first
            this.scrollMode = NestedScrollMode.SELF_FIRST
          }
        })

      }
    }
    .width('100%')
    .layoutWeight(1)
    .padding({
      left: 14,
      right: 14
    })
    .scrollBar(BarState.Off)
  }
}

Limitations or Considerations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release and above for compilation.

Written by Seyda Kececi