diff --git a/website/docs/en-US/scrollbar.md b/website/docs/en-US/scrollbar.md
index ba54bd774a..8eda6a830c 100644
--- a/website/docs/en-US/scrollbar.md
+++ b/website/docs/en-US/scrollbar.md
@@ -74,7 +74,7 @@ Used to replace the browser's native scrollbar.
 
 ```html
 <template>
-  <el-scrollbar ref="scrollbar" height="400px" always>
+  <el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
     <div ref="inner">
       <p class="item" v-for="item in 20">{{ item }}</p>
     </div>
@@ -103,6 +103,9 @@ Used to replace the browser's native scrollbar.
       inputSlider(value) {
         this.$refs.scrollbar.setScrollTop(value)
       },
+      scroll({ scrollTop }) {
+        this.value = scrollTop
+      },
       formatTooltip(value) {
         return `${value} px`
       },
diff --git a/website/docs/es/scrollbar.md b/website/docs/es/scrollbar.md
index ba54bd774a..8eda6a830c 100644
--- a/website/docs/es/scrollbar.md
+++ b/website/docs/es/scrollbar.md
@@ -74,7 +74,7 @@ Used to replace the browser's native scrollbar.
 
 ```html
 <template>
-  <el-scrollbar ref="scrollbar" height="400px" always>
+  <el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
     <div ref="inner">
       <p class="item" v-for="item in 20">{{ item }}</p>
     </div>
@@ -103,6 +103,9 @@ Used to replace the browser's native scrollbar.
       inputSlider(value) {
         this.$refs.scrollbar.setScrollTop(value)
       },
+      scroll({ scrollTop }) {
+        this.value = scrollTop
+      },
       formatTooltip(value) {
         return `${value} px`
       },
diff --git a/website/docs/fr-FR/scrollbar.md b/website/docs/fr-FR/scrollbar.md
index ba54bd774a..8eda6a830c 100644
--- a/website/docs/fr-FR/scrollbar.md
+++ b/website/docs/fr-FR/scrollbar.md
@@ -74,7 +74,7 @@ Used to replace the browser's native scrollbar.
 
 ```html
 <template>
-  <el-scrollbar ref="scrollbar" height="400px" always>
+  <el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
     <div ref="inner">
       <p class="item" v-for="item in 20">{{ item }}</p>
     </div>
@@ -103,6 +103,9 @@ Used to replace the browser's native scrollbar.
       inputSlider(value) {
         this.$refs.scrollbar.setScrollTop(value)
       },
+      scroll({ scrollTop }) {
+        this.value = scrollTop
+      },
       formatTooltip(value) {
         return `${value} px`
       },
diff --git a/website/docs/jp/scrollbar.md b/website/docs/jp/scrollbar.md
index ba54bd774a..8eda6a830c 100644
--- a/website/docs/jp/scrollbar.md
+++ b/website/docs/jp/scrollbar.md
@@ -74,7 +74,7 @@ Used to replace the browser's native scrollbar.
 
 ```html
 <template>
-  <el-scrollbar ref="scrollbar" height="400px" always>
+  <el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
     <div ref="inner">
       <p class="item" v-for="item in 20">{{ item }}</p>
     </div>
@@ -103,6 +103,9 @@ Used to replace the browser's native scrollbar.
       inputSlider(value) {
         this.$refs.scrollbar.setScrollTop(value)
       },
+      scroll({ scrollTop }) {
+        this.value = scrollTop
+      },
       formatTooltip(value) {
         return `${value} px`
       },
diff --git a/website/docs/zh-CN/scrollbar.md b/website/docs/zh-CN/scrollbar.md
index 2b754ee18d..bb6f9342b4 100644
--- a/website/docs/zh-CN/scrollbar.md
+++ b/website/docs/zh-CN/scrollbar.md
@@ -74,7 +74,7 @@
 
 ```html
 <template>
-  <el-scrollbar ref="scrollbar" height="400px" always>
+  <el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
     <div ref="inner">
       <p class="item" v-for="item in 20">{{ item }}</p>
     </div>
@@ -103,6 +103,9 @@
       inputSlider(value) {
         this.$refs.scrollbar.setScrollTop(value)
       },
+      scroll({ scrollTop }) {
+        this.value = scrollTop
+      },
       formatTooltip(value) {
         return `${value} px`
       },