1# Web组件嵌套滚动
2
3Web组件嵌套滚动的典型应用场景为，在一个页面中，有多个独立的区域需要进行滚动，当用户滚动Web区域内容时，可带动其他滚动区域进行滚动，以达到上下滑动页面的用户体验。
4内嵌在可滚动容器（[Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md)、[List](../reference/apis-arkui/arkui-ts/ts-container-list.md)...）中的Web组件，接收到滑动手势事件，需要对接ArkUI框架的[NestedScrollMode](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10)枚举类型，使得Web组件可以嵌套ArkUI可滚动容器，进行嵌套滚动。开发者可以在Web组件创建时，使用[nestedScroll](../reference/apis-arkweb/ts-basic-components-web.md#nestedscroll11)属性接口指定默认的嵌套滚动模式，也允许在过程中动态改变嵌套滚动的模式。
5
6nestedScroll入参为一个[NestedScrollOptions](../reference/apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10对象说明)对象，该对象具有两个属性，分别为scrollForward和scrollBackward，每一个属性都为一个[NestedScrollMode](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10)枚举类型。
7
8当Web组件被多个可滚动容器组件嵌套时，未被Web组件消费的与父组件方向一致的偏移量、速度值将被传递给距Web组件最近且方向一致的父组件，使得父组件可以继续滚动。一次手势滑动只能沿X轴或Y轴一个方向嵌套滚动，当手势斜向滑动时，滚动方向为偏移量或速度在X轴、Y轴绝对值较大的方向；当偏移量或速度绝对值在X轴、Y轴绝对值相同时，滚动方向为距Web组件最近的可滚动组件的方向。
9
10> **说明：**
11>
12> - 支持嵌套滚动的容器：[Grid](../reference/apis-arkui/arkui-ts/ts-container-grid.md)、[List](../reference/apis-arkui/arkui-ts/ts-container-list.md)、[Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md)、[Swiper](../reference/apis-arkui/arkui-ts/ts-container-swiper.md)、[Tabs](../reference/apis-arkui/arkui-ts/ts-container-tabs.md)、[WaterFlow](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md)、[Refresh](../reference/apis-arkui/arkui-ts/ts-container-refresh.md)、[bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet)。
13> - 支持嵌套滚动的输入事件：使用手势、鼠标、触控板。
14
15```ts
16// xxx.ets
17import { webview } from '@kit.ArkWeb';
18
19@Entry
20@Component
21struct NestedScroll {
22  private scrollerForScroll: Scroller = new Scroller();
23  controller: webview.WebviewController = new webview.WebviewController();
24  controller2: webview.WebviewController = new webview.WebviewController();
25  // NestedScrollMode设置成SELF_ONLY时，Web网页滚动到页面边缘后，不与父组件联动，父组件仍无法滚动。
26  @State NestedScrollMode0: NestedScrollMode = NestedScrollMode.SELF_ONLY;
27  // NestedScrollMode设置成SELF_FIRST时，Web网页滚动到页面边缘后，父组件继续滚动。
28  @State NestedScrollMode1: NestedScrollMode = NestedScrollMode.SELF_FIRST;
29  // NestedScrollMode设置为PARENT_FIRST时，父组件先滚动，滚动至边缘后通知Web继续滚动。
30  @State NestedScrollMode2: NestedScrollMode = NestedScrollMode.PARENT_FIRST;
31  // NestedScrollMode设置为PARALLEL时，父组件与Web同时滚动。
32  @State NestedScrollMode3: NestedScrollMode = NestedScrollMode.PARALLEL;
33  @State NestedScrollModeF: NestedScrollMode = NestedScrollMode.SELF_FIRST;
34  @State NestedScrollModeB: NestedScrollMode = NestedScrollMode.SELF_FIRST;
35  // scroll竖向的滚动
36  @State ScrollDirection: ScrollDirection = ScrollDirection.Vertical;
37
38  build() {
39    Flex() {
40      Scroll(this.scrollerForScroll) {
41        Column({ space: 5 }) {
42          Row({}) {
43            Text('切换前滚动模式').fontSize(5)
44            Button('SELF_ONLY').onClick((event: ClickEvent) => {
45              this.NestedScrollModeF = this.NestedScrollMode0
46            }).fontSize(5)
47            Button('SELF_FIRST').onClick((event: ClickEvent) => {
48              this.NestedScrollModeF = this.NestedScrollMode1
49            }).fontSize(5)
50            Button('PARENT_FIRST').onClick((event: ClickEvent) => {
51              this.NestedScrollModeF = this.NestedScrollMode2
52            }).fontSize(5)
53            Button('PARALLEL').onClick((event: ClickEvent) => {
54              this.NestedScrollModeF = this.NestedScrollMode3
55            }).fontSize(5)
56          }
57
58          Row({}) {
59            Text('切换后滚动模式').fontSize(5)
60            Button('SELF_ONLY').onClick((event: ClickEvent) => {
61              this.NestedScrollModeB = this.NestedScrollMode0
62            }).fontSize(5)
63            Button('SELF_FIRST').onClick((event: ClickEvent) => {
64              this.NestedScrollModeB = this.NestedScrollMode1
65            }).fontSize(5)
66            Button('PARENT_FIRST').onClick((event: ClickEvent) => {
67              this.NestedScrollModeB = this.NestedScrollMode2
68            }).fontSize(5)
69            Button('PARALLEL').onClick((event: ClickEvent) => {
70              this.NestedScrollModeB = this.NestedScrollMode3
71            }).fontSize(5)
72          }
73
74          Text('当前内嵌前滚动模式 scrollForward ---' + `${this.NestedScrollModeF}`).fontSize(10)
75          Text('当前内嵌后滚动模式  scrollBackward ---' + `${this.NestedScrollModeB}`).fontSize(10)
76
77          Text("Scroll Area")
78            .width("100%")
79            .height("10%")
80            .backgroundColor(0X330000FF)
81            .fontSize(16)
82            .textAlign(TextAlign.Center)
83          Text("Scroll Area")
84            .width("100%")
85            .height("10%")
86            .backgroundColor(0X330000FF)
87            .fontSize(16)
88            .textAlign(TextAlign.Center)
89          Text("Scroll Area")
90            .width("100%")
91            .height("10%")
92            .backgroundColor(0X330000FF)
93            .fontSize(16)
94            .textAlign(TextAlign.Center)
95
96          Web({ src: "www.example.com", controller: this.controller })
97            .nestedScroll({
98              scrollForward: this.NestedScrollModeF,
99              scrollBackward: this.NestedScrollModeB,
100            })
101            .height("40%")
102            .width("100%")
103
104          Text("Scroll Area")
105            .width("100%")
106            .height("20%")
107            .backgroundColor(0X330000FF)
108            .fontSize(16)
109            .textAlign(TextAlign.Center)
110
111          Text("Scroll Area")
112            .width("100%")
113            .height("20%")
114            .backgroundColor(0X330000FF)
115            .fontSize(16)
116            .textAlign(TextAlign.Center)
117
118          Web({ src: "www.example.com", controller: this.controller2 })
119            .nestedScroll({
120              scrollForward: this.NestedScrollModeF,
121              scrollBackward: this.NestedScrollModeB,
122            })
123            .height("40%")
124            .width("90%")
125
126          Text("Scroll Area")
127            .width("100%")
128            .height("20%")
129            .backgroundColor(0X330000FF)
130            .fontSize(16)
131            .textAlign(TextAlign.Center)
132
133        }.width("95%").border({ width: 5 })
134      }
135      .width("100%").height("120%").border({ width: 5 }).scrollable(this.ScrollDirection)
136    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
137  }
138}
139```
140
141![web-nested-scrolling](figures/web-nested-scrolling.gif)
142<!--RP1--><!--RP1End-->