update ts-container-scroll.md (6284)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-container-scroll.md

 # Scroll
 
 
-> **NOTE**<br>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
+The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
 
-The **<Scroll\>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -25,24 +25,36 @@ Scroll(scroller?: Scroller)
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
+| Name       | Type      | Default Value      | Description |
 | -------- | -------- | -------- | -------- |
 | scrollable     | ScrollDirection   | ScrollDirection.Vertical | Scroll method. |
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. |
-| scrollBarColor | Color | - | Color of the scroll bar. |
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate-enums) | ScrollDirection.Auto | Scrollbar status. |
+| scrollBarColor | Color | - | Color of the scrollbar. |
 | scrollBarWidth | Length | - | Width of the scrollbar. |
 
 - ScrollDirection
-  | Name     | Description |
+  | Name       | Description |
   | -------- | -------- |
   | Horizontal | Only horizontal scrolling is supported. |
   | Vertical | Only vertical scrolling is supported. |
   | None     | Scrolling is disabled. |
 
+## Events
+
+| Name | Description |
+| -------- | -------- |
+| onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Called when scrolling starts.<br>Parameters<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
+| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked when scrolling starts. It returns the horizontal and vertical offsets. |
+| onScrollEdge(side: Edge) =&gt; void | Invoked when scrolling reaches the edge. |
+| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
+
+>  **NOTE**
+>
+>  If the **onScrollBegin** event and **scrollBy** method are used to implement nested scrolling, you must set **edgeEffect** of the child scrolling node to **None**. For example, if the **\<Scroll>** component is nested with the **\<List>** component, the **edgeEffect** attribute of the **\<List>** component must be set to **EdgeEffect.None**.
 
 ## Scroller
 
-Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **<List\>** and **<Scroll\>** components.
+Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
 
 
 ### Objects to Import
@@ -53,7 +65,7 @@ scroller: Scroller = new Scroller()
 ```
 
 
-### scroller.scrollTo
+### scrollTo
 
 scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void
 
@@ -66,10 +78,10 @@ Scrolls to the specified position.
   | -------- | -------- | -------- | -------- | -------- |
   | xOffset | Length | Yes | - | Horizontal scrolling offset. |
   | yOffset | Length | Yes | - | Vertical scrolling offset. |
-  | animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No |  | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
+  | animation | {<br>duration: number,<br>curve: Curve \|<br>CubicBezier \|<br>SpringCurve<br>} | No |  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve. |
 
 
-### scroller.scrollEdge
+### scrollEdge
 
 scrollEdge(value: Edge): void
 
@@ -78,24 +90,25 @@ Scrolls to the edge of the container.
 
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+    | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
   | value | Edge | Yes | - | Edge position to scroll to. |
 
 
-### scroller.scrollPage
+### scrollPage
 
 scrollPage(value: { next: boolean, direction?: Axis }): void
 
 Scrolls to the next or previous page.
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+    | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
   | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
+  | direction | Axis    | No   | -    | Scrolling direction: horizontal or vertical.               |
 
 
-### scroller.currentOffset
+### currentOffset
 
 scroller.currentOffset(): Object
 
@@ -104,9 +117,9 @@ Obtains the scrolling offset.
 
 
 - Return value
-  | Type | Description |
+    | Type | Description |
   | -------- | -------- |
-  | {<br/>xOffset: number,<br/>yOffset: number<br/>} | - **xOffset**: horizontal scrolling offset.<br/>- **yOffset**: vertical scrolling offset. |
+  | {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset. |
 
 
 ### scroller.scrollToIndex
@@ -117,8 +130,9 @@ scroller.scrollToIndex(value: number): void
 Scrolls to the specified index.
 
 
-> **NOTE**<br>
-> Only the **<List\>** component is supported.
+> **NOTE**
+>
+> Only the **\<List>** component is supported.
 
 
 - Parameters
@@ -127,19 +141,30 @@ Scrolls to the specified index.
   | value | number | Yes | - | Index of the item to be scrolled to in the list. |
 
 
-## Events
+### scrollBy
 
-| Name | Description |
-| -------- | -------- |
-| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked to return the horizontal and vertical scrolling offsets when the specified scroll event occurs. |
-| onScrollEdge(side: Edge) =&gt; void | Invoked when an item is scrolled to the edge. |
-| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
+scrollBy(dx: Length, dy: Length): void
 
 
-## Example
+Scrolls by the specified amount.
 
 
-```
+>  **NOTE**
+>
+>  Only the **\<Scroll>** component is supported.
+
+
+- Parameters
+  | Name  | Type  | Mandatory  | Default Value | Description             |
+  | ----- | ------ | ---- | ---- | ----------------- |
+  | dx | Length | Yes   | -    | Amount to scroll by in the horizontal direction.|
+  | dy | Length | Yes   | -    | Amount to scroll by in the vertical direction.|
+
+
+## Example
+
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollExample {
@@ -152,14 +177,20 @@ struct ScrollExample {
         Column() {
           ForEach(this.arr, (item) => {
             Text(item.toString())
-              .width('90%').height(150).backgroundColor(0xFFFFFF)
-              .borderRadius(15).fontSize(16).textAlign(TextAlign.Center)
+              .width('90%')
+              .height(150)
+              .backgroundColor(0xFFFFFF)
+              .borderRadius(15)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
               .margin({ top: 10 })
           }, item => item)
         }.width('100%')
       }
-      .scrollable(ScrollDirection.Vertical).scrollBar(BarState.On)
-      .scrollBarColor(Color.Gray).scrollBarWidth(30)
+      .scrollable(ScrollDirection.Vertical)
+      .scrollBar(BarState.On)
+      .scrollBarColor(Color.Gray)
+      .scrollBarWidth(30)
       .onScroll((xOffset: number, yOffset: number) => {
         console.info(xOffset + ' ' + yOffset)
       })
@@ -191,3 +222,56 @@ struct ScrollExample {
 ```
 
 ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
+```ts
+@Entry
+@Component
+struct NestedScroll {
+  @State listPosition: number = 0 // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the center of the list, and 2 indicates scrolling to the bottom of the list.
+  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  private scroller: Scroller = new Scroller()
+
+  build() {
+    Flex() {
+      Scroll(this.scroller) {
+        Column() {
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+
+          List({ space: 20 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text("ListItem" + item)
+                  .width("100%").height("100%").borderRadius(15)
+                  .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
+              }.width("100%").height(100)
+            }, item => item)
+          }
+          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .onReachStart(() => {
+            this.listPosition = 0
+          })
+          .onReachEnd(() => {
+            this.listPosition = 2
+          })
+          .onScrollBegin((dx: number, dy: number) => {
+            if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
+              this.scroller.scrollBy(0, -dy)
+              return { dxRemain: dx, dyRemain: 0 }
+            }
+            this.listPosition = 1;
+            return { dxRemain: dx, dyRemain: dy }
+          })
+
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+        }
+      }
+      .width("100%").height("100%")
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+  }
+}
+```
+
+![NestedScroll](figures/NestedScroll.gif)