From eaad880bc3d753c75115c4cdb5b0644239478393 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E5=B8=85?= <892739385@qq.com>
Date: Wed, 6 Sep 2023 17:25:07 +0800
Subject: [PATCH] Update scroll.md

---
 .../assets/tutorials/en/interaction/scroll.md | 87 ++++++++++++++++---
 1 file changed, 77 insertions(+), 10 deletions(-)

diff --git a/docs/assets/tutorials/en/interaction/scroll.md b/docs/assets/tutorials/en/interaction/scroll.md
index 60551def9..1575d6903 100644
--- a/docs/assets/tutorials/en/interaction/scroll.md
+++ b/docs/assets/tutorials/en/interaction/scroll.md
@@ -21,17 +21,84 @@ VTable provides rich scroll style configuration items, and users can customize t
 Below we show the effect of these configurations with an example:
 
 ```javascript livedemo  template=vtable
-const table =new VTable.ListTable(
-    ...
-    theme: {
-    scrollStyle: {
-        visible:'always',
-        scrollSliderColor:'purple',
-        scrollRailColor:'#bac3cc',
-        hoverOn:false
+let  tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
+    .then((res) => res.json())
+    .then((data) => {
+  const columns =[
+      {
+          "field": "Order ID",
+          "title": "Order ID",
+          "width": "auto"
+      },
+      {
+          "field": "Customer ID",
+          "title": "Customer ID",
+          "width": "auto"
+      },
+      {
+          "field": "Product Name",
+          "title": "Product Name",
+          "width": "auto"
+      },
+      {
+          "field": "Category",
+          "title": "Category",
+          "width": "auto"
+      },
+      {
+          "field": "Sub-Category",
+          "title": "Sub-Category",
+          "width": "auto"
+      },
+      {
+          "field": "Region",
+          "title": "Region",
+          "width": "auto"
+      },
+      {
+          "field": "City",
+          "title": "City",
+          "width": "auto"
+      },
+      {
+          "field": "Order Date",
+          "title": "Order Date",
+          "width": "auto"
+      },
+      {
+          "field": "Quantity",
+          "title": "Quantity",
+          "width": "auto"
+      },
+      {
+          "field": "Sales",
+          "title": "Sales",
+          "width": "auto"
+      },
+      {
+          "field": "Profit",
+          "title": "Profit",
+          "width": "auto"
       }
-    }
-}
+  ];
+
+  const option = {
+    records:data,
+    columns,
+    widthMode:'standard',
+        theme: {
+      scrollStyle: {
+          visible:'always',
+          scrollSliderColor:'purple',
+          scrollRailColor:'#bac3cc',
+          hoverOn:false
+        }
+      }
+  };
+  tableInstance =  new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+  window['tableInstance'] = tableInstance;
+})
 ```
 
 ## Scroll horizontally