diff --git a/website/docs/en-US/scrollbar.md b/website/docs/en-US/scrollbar.md
index b9bca2ddbd..2e1bd575b7 100644
--- a/website/docs/en-US/scrollbar.md
+++ b/website/docs/en-US/scrollbar.md
@@ -8,9 +8,11 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar height="400px">
-  <p class="item" v-for="item in 20">{{ item }}</p>
-</el-scrollbar>
+<template>
+  <el-scrollbar height="400px">
+    <p class="item" v-for="item in 20">{{ item }}</p>
+  </el-scrollbar>
+</template>
 ```
 
 :::
@@ -21,11 +23,13 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar>
-  <div class="flex-content">
-    <p class="item" v-for="item in 50">{{ item }}</p>
-  </div>
-</el-scrollbar>
+<template>
+  <el-scrollbar>
+    <div class="flex-content">
+      <p class="item" v-for="item in 50">{{ item }}</p>
+    </div>
+  </el-scrollbar>
+</template>
 ```
 
 :::
diff --git a/website/docs/es/scrollbar.md b/website/docs/es/scrollbar.md
index b9bca2ddbd..2e1bd575b7 100644
--- a/website/docs/es/scrollbar.md
+++ b/website/docs/es/scrollbar.md
@@ -8,9 +8,11 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar height="400px">
-  <p class="item" v-for="item in 20">{{ item }}</p>
-</el-scrollbar>
+<template>
+  <el-scrollbar height="400px">
+    <p class="item" v-for="item in 20">{{ item }}</p>
+  </el-scrollbar>
+</template>
 ```
 
 :::
@@ -21,11 +23,13 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar>
-  <div class="flex-content">
-    <p class="item" v-for="item in 50">{{ item }}</p>
-  </div>
-</el-scrollbar>
+<template>
+  <el-scrollbar>
+    <div class="flex-content">
+      <p class="item" v-for="item in 50">{{ item }}</p>
+    </div>
+  </el-scrollbar>
+</template>
 ```
 
 :::
diff --git a/website/docs/fr-FR/scrollbar.md b/website/docs/fr-FR/scrollbar.md
index b9bca2ddbd..2e1bd575b7 100644
--- a/website/docs/fr-FR/scrollbar.md
+++ b/website/docs/fr-FR/scrollbar.md
@@ -8,9 +8,11 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar height="400px">
-  <p class="item" v-for="item in 20">{{ item }}</p>
-</el-scrollbar>
+<template>
+  <el-scrollbar height="400px">
+    <p class="item" v-for="item in 20">{{ item }}</p>
+  </el-scrollbar>
+</template>
 ```
 
 :::
@@ -21,11 +23,13 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar>
-  <div class="flex-content">
-    <p class="item" v-for="item in 50">{{ item }}</p>
-  </div>
-</el-scrollbar>
+<template>
+  <el-scrollbar>
+    <div class="flex-content">
+      <p class="item" v-for="item in 50">{{ item }}</p>
+    </div>
+  </el-scrollbar>
+</template>
 ```
 
 :::
diff --git a/website/docs/jp/scrollbar.md b/website/docs/jp/scrollbar.md
index b9bca2ddbd..2e1bd575b7 100644
--- a/website/docs/jp/scrollbar.md
+++ b/website/docs/jp/scrollbar.md
@@ -8,9 +8,11 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar height="400px">
-  <p class="item" v-for="item in 20">{{ item }}</p>
-</el-scrollbar>
+<template>
+  <el-scrollbar height="400px">
+    <p class="item" v-for="item in 20">{{ item }}</p>
+  </el-scrollbar>
+</template>
 ```
 
 :::
@@ -21,11 +23,13 @@ Used to replace the browser's native scrollbar.
 
 ```html
 
-<el-scrollbar>
-  <div class="flex-content">
-    <p class="item" v-for="item in 50">{{ item }}</p>
-  </div>
-</el-scrollbar>
+<template>
+  <el-scrollbar>
+    <div class="flex-content">
+      <p class="item" v-for="item in 50">{{ item }}</p>
+    </div>
+  </el-scrollbar>
+</template>
 ```
 
 :::
diff --git a/website/docs/zh-CN/scrollbar.md b/website/docs/zh-CN/scrollbar.md
index 459b8a85b4..10a45914aa 100644
--- a/website/docs/zh-CN/scrollbar.md
+++ b/website/docs/zh-CN/scrollbar.md
@@ -8,9 +8,11 @@
 
 ```html
 
-<el-scrollbar height="400px">
-  <p class="item" v-for="item in 20">{{ item }}</p>
-</el-scrollbar>
+<template>
+  <el-scrollbar height="400px">
+    <p class="item" v-for="item in 20">{{ item }}</p>
+  </el-scrollbar>
+</template>
 ```
 
 :::
@@ -21,11 +23,13 @@
 
 ```html
 
-<el-scrollbar>
-  <div class="flex-content">
-    <p class="item" v-for="item in 50">{{ item }}</p>
-  </div>
-</el-scrollbar>
+<template>
+  <el-scrollbar>
+    <div class="flex-content">
+      <p class="item" v-for="item in 50">{{ item }}</p>
+    </div>
+  </el-scrollbar>
+</template>
 ```
 
 :::