1# Implementing Nested Scrolling
2
3There may be times when you want to implement nested scrolling for the **Web** component. A typical use case is a page that contains multiple scrollable areas including the **Web** component, whose scrolling is intrinsically linked with the scroll positions in other areas.
4If you opt to embed a **Web** component in a scroll container (such as [Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md) and [List](../reference/apis-arkui/arkui-ts/ts-container-list.md)) for nested scrolling, use the [NestedScrollMode](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) enum of the ArkUI framework. You can specify the default nested scrolling mode through [nestedScroll](../reference/apis-arkweb/ts-basic-components-web.md#nestedscroll11) during creation of the **Web** component; this nested scrolling mode allows for dynamic changes.
5
6**nestedScroll** is a [NestedScrollOptions](../reference/apis-arkui/arkui-ts/ts-container-scrollable-common.md#nestedscrolloptions10) object that has two attributes: **scrollForward** and **scrollBackward**, both of which are [NestedScrollMode](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#nestedscrollmode10) enum values.
7
8When a **Web** component is nested in multiple scrollable containers, the offset and speed values that are not consumed by the **Web** component are passed to the parent container that is closest to the **Web** component in the same direction so that the parent container can continue to scroll. A swipe gesture can initiate scrolling along either the x-axis or y-axis. If the finger moves between the x-axis and y-axis, the scrolling occurs along the axis where the offset or speed has a larger absolute value. If the absolute values of the offset or speed on the x-axis and y-axis are the same, the scrolling occurs in the direction of the scrollable component closest to the **Web** component.
9
10> **NOTE**
11>
12> - Containers that support nested scrolling: **Grid**, **List**, **Scroll**, **Swiper**, **Tabs**, and **WaterFlow**.
13> - Input sources that support nested scrolling: gestures, mouse device, and touchpad.
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  // With NestedScrollMode set to SELF_ONLY, the parent component does not scroll when the component scrolling reaches the boundary.
26  @State NestedScrollMode0: NestedScrollMode = NestedScrollMode.SELF_ONLY;
27  // With NestedScrollMode set to SELF_FIRST, the component scrolls first, and when it hits the boundary, the parent component scrolls.
28  @State NestedScrollMode1: NestedScrollMode = NestedScrollMode.SELF_FIRST;
29  // With NestedScrollMode set to PARENT_FIRST, the parent component scrolls first, and when it hits the boundary, the component scrolls.
30  @State NestedScrollMode2: NestedScrollMode = NestedScrollMode.PARENT_FIRST;
31  // With NestedScrollMode set to PARALLEL, the component and its parent component scroll at the same time.
32  @State NestedScrollMode3: NestedScrollMode = NestedScrollMode.PARALLEL;
33  @State NestedScrollModeF: NestedScrollMode = NestedScrollMode.SELF_FIRST;
34  @State NestedScrollModeB: NestedScrollMode = NestedScrollMode.SELF_FIRST;
35  // Vertical scrolling.
36  @State ScrollDirection: ScrollDirection = ScrollDirection.Vertical;
37
38  build() {
39    Flex() {
40      Scroll(this.scrollerForScroll) {
41        Column({ space: 5 }) {
42          Row({}) {
43            Text('Scroll Forward').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('Scroll Backward').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('Default mode: scrollForward ---' + `${this.NestedScrollModeF}`).fontSize(10)
75          Text('Default mode: 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-->
143