diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif
index 070ae9d042d5211b2ccc6c187ec0f87a90d2c963..36e5cf928d08d719eab8bb0c417da0bc23472798 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001232775585.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index b300a6a2ab18d2453b685c998e9059eb7466a8eb..28ac99a433c3df62575a14fc904957da903e17fa 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -45,7 +45,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
 @Component
 struct ScrollBarExample {
   private scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
 
   build() {
     Column() {
@@ -55,8 +55,8 @@ struct ScrollBarExample {
             ForEach(this.arr, (item) => {
               Row() {
                 Text(item.toString())
-                  .width('90%')
-                  .height(100)
+                  .width('80%')
+                  .height(60)
                   .backgroundColor('#3366CC')
                   .borderRadius(15)
                   .fontSize(16)
@@ -64,17 +64,18 @@ struct ScrollBarExample {
                   .margin({ top: 5 })
               }
             }, item => item)
-          }.margin({ right: 52 })
+          }.margin({ right: 15 })
         }
+        .width('90%')
         .scrollBar(BarState.Off)
         .scrollable(ScrollDirection.Vertical)
         ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
           Text()
-            .width(30)
+            .width(20)
             .height(100)
             .borderRadius(10)
             .backgroundColor('#C0C0C0')
-        }.width(30).backgroundColor('#ededed')
+        }.width(20).backgroundColor('#ededed')
       }
     }
   }