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 scrollable container (such as **\<Scroll>** and **\<List>**) for nested scrolling, use the [NestedScrollMode](../reference/apis-arkweb/ts-basic-components-web.md#nestedscrollmode11) 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-arkweb/ts-basic-components-web.md#nestedscrolloptions11) object that has two attributes: **scrollForward** and **scrollBackward**, both of which are [NestedScrollMode](../reference/apis-arkweb/ts-basic-components-web.md#nestedscrollmode11) enum values. 7 8```ts 9// xxx.ets 10import web_webview from '@ohos.web.webview'; 11 12@Entry 13@Component 14struct NestedScroll { 15 private scrollerForScroll: Scroller = new Scroller() 16 controller: web_webview.WebviewController = new web_webview.WebviewController(); 17 controller2: web_webview.WebviewController = new web_webview.WebviewController(); 18 // With NestedScrollMode set to SELF_ONLY, the parent component does not scroll when the component scrolling reaches the boundary. 19 @State NestedScrollMode0:NestedScrollMode=NestedScrollMode.SELF_ONLY 20 // With NestedScrollMode set to SELF_FIRST, the component scrolls first, and when it hits the boundary, the parent component scrolls. 21 @State NestedScrollMode1:NestedScrollMode=NestedScrollMode.SELF_FIRST 22 // With NestedScrollMode set to PARENT_FIRST, the parent component scrolls first, and when it hits the boundary, the component scrolls. 23 @State NestedScrollMode2:NestedScrollMode=NestedScrollMode.PARENT_FIRST 24 // With NestedScrollMode set to PARALLEL, the component and its parent component scroll at the same time. 25 @State NestedScrollMode3:NestedScrollMode=NestedScrollMode.PARALLEL 26 @State NestedScrollModeF:NestedScrollMode=NestedScrollMode.SELF_FIRST 27 @State NestedScrollModeB:NestedScrollMode=NestedScrollMode.SELF_FIRST 28 // Vertical scrolling. 29 @State ScrollDirection:ScrollDirection=ScrollDirection.Vertical 30 31 build() { 32 Flex() { 33 Scroll(this.scrollerForScroll) { 34 Column({space:5}) { 35 Row({}){ 36 Text('Scroll Forward').fontSize(5) 37 Button('SELF_ONLY').onClick((event: ClickEvent) => { 38 this.NestedScrollModeF=this.NestedScrollMode0 39 }).fontSize(5) 40 Button('SELF_FIRST').onClick((event: ClickEvent) => { 41 this.NestedScrollModeF=this.NestedScrollMode1 42 }).fontSize(5) 43 Button('PARENT_FIRST').onClick((event: ClickEvent) => { 44 this.NestedScrollModeF=this.NestedScrollMode2 45 }).fontSize(5) 46 Button('PARALLEL').onClick((event: ClickEvent) => { 47 this.NestedScrollModeF=this.NestedScrollMode3 48 }).fontSize(5) 49 } 50 Row({}){ 51 Text('Scroll Backward').fontSize(5) 52 Button('SELF_ONLY').onClick((event: ClickEvent) => { 53 this.NestedScrollModeB=this.NestedScrollMode0 54 }).fontSize(5) 55 Button('SELF_FIRST').onClick((event: ClickEvent) => { 56 this.NestedScrollModeB=this.NestedScrollMode1 57 }).fontSize(5) 58 Button('PARENT_FIRST').onClick((event: ClickEvent) => { 59 this.NestedScrollModeB=this.NestedScrollMode2 60 }).fontSize(5) 61 Button('PARALLEL').onClick((event: ClickEvent) => { 62 this.NestedScrollModeB=this.NestedScrollMode3 63 }).fontSize(5) 64 } 65 Text('Default mode: scrollForward ---'+`${this.NestedScrollModeF}`).fontSize(10) 66 Text('Default mode: scrollBackward ---'+`${this.NestedScrollModeB}`).fontSize(10) 67 68 Text("Scroll Area") 69 .width("100%") 70 .height("10%") 71 .backgroundColor(0X330000FF) 72 .fontSize(16) 73 .textAlign(TextAlign.Center) 74 Text("Scroll Area") 75 .width("100%") 76 .height("10%") 77 .backgroundColor(0X330000FF) 78 .fontSize(16) 79 .textAlign(TextAlign.Center) 80 Text("Scroll Area") 81 .width("100%") 82 .height("10%") 83 .backgroundColor(0X330000FF) 84 .fontSize(16) 85 .textAlign(TextAlign.Center) 86 87 Web({ src: "www.example.com", controller: this.controller}) 88 .nestedScroll({ 89 scrollForward: this.NestedScrollModeF, 90 scrollBackward: this.NestedScrollModeB, 91 }) 92 .height("40%") 93 .width("100%") 94 95 Text("Scroll Area") 96 .width("100%") 97 .height("20%") 98 .backgroundColor(0X330000FF) 99 .fontSize(16) 100 .textAlign(TextAlign.Center) 101 102 Text("Scroll Area") 103 .width("100%") 104 .height("20%") 105 .backgroundColor(0X330000FF) 106 .fontSize(16) 107 .textAlign(TextAlign.Center) 108 109 Web({ src: "www.example.com", controller: this.controller2}) 110 .nestedScroll({ 111 scrollForward: this.NestedScrollModeF, 112 scrollBackward: this.NestedScrollModeB, 113 }) 114 .height("40%") 115 .width("90%") 116 117 Text("Scroll Area") 118 .width("100%") 119 .height("20%") 120 .backgroundColor(0X330000FF) 121 .fontSize(16) 122 .textAlign(TextAlign.Center) 123 124 }.width("95%").border({width:5}) 125 } 126 .width("100%").height("120%").border({width:5}).scrollable(this.ScrollDirection) 127 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) 128 } 129} 130``` 131 132 133
