diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 56bc9a5644..a52b21b903 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -580,14 +580,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$--scrollbar-background-color: rgba(
-  var(--el-text-color-secondary),
-  0.3
-) !default;
-$--scrollbar-hover-background-color: rgba(
-  var(--el-text-color-secondary),
-  0.5
-) !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/scrollbar.scss
 
 /* Carousel
 --------------------------*/
diff --git a/packages/theme-chalk/src/scrollbar.scss b/packages/theme-chalk/src/scrollbar.scss
index 9644aa64a5..d1f7e4e155 100644
--- a/packages/theme-chalk/src/scrollbar.scss
+++ b/packages/theme-chalk/src/scrollbar.scss
@@ -1,6 +1,13 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-scrollbar-opacity: 0.3;
+  --el-scrollbar-background-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-opacity: 0.5;
+  --el-scrollbar-hover-background-color: var(--el-text-color-secondary);
+}
+
 @include b(scrollbar) {
   overflow: hidden;
   position: relative;
@@ -25,11 +32,13 @@
     height: 0;
     cursor: pointer;
     border-radius: inherit;
-    background-color: $--scrollbar-background-color;
+    background-color: var(--el-scrollbar-background-color);
     transition: var(--el-transition-duration) background-color;
+    opacity: var(--el-scrollbar-opacity);
 
     &:hover {
-      background-color: $--scrollbar-hover-background-color;
+      background-color: var(--el-scrollbar-hover-background-color);
+      opacity: var(--el-scrollbar-hover-opacity);
     }
   }
 
diff --git a/website/docs/en-US/config-provider.md b/website/docs/en-US/config-provider.md
index 294a1e2248..f3cb6ddaea 100644
--- a/website/docs/en-US/config-provider.md
+++ b/website/docs/en-US/config-provider.md
@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
 ```html
 <div>
   <el-config-provider :locale="locale2">
-    <el-color-picker :modelValue="''" style="vertical-align: middle;">
+    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
   </el-config-provider>
   <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
     Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: '确定',
               clear: '清空',
             },
-          }
+          },
         },
         locale2: {
           name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'Confirm',
               clear: 'Clear',
             },
-          }
-        }
+          },
+        },
       }
     },
     methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
         const temp = this.locale1
         this.locale1 = this.locale2
         this.locale2 = temp
-      }
-    }
+      },
+    },
   }
 </script>
-
 ```
 
 :::
 
 ### ConfigProvider Attributes
 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
-| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
+| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
+| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
+| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -       |
diff --git a/website/docs/es/config-provider.md b/website/docs/es/config-provider.md
index 04c0418934..4ab42b5827 100644
--- a/website/docs/es/config-provider.md
+++ b/website/docs/es/config-provider.md
@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
 ```html
 <div>
   <el-config-provider :locale="locale1">
-    <el-color-picker :modelValue="''" style="vertical-align: middle;">
+    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
   </el-config-provider>
   <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
     Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'Confirmar',
               clear: 'Despejar',
             },
-          }
+          },
         },
         locale2: {
           name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'Confirm',
               clear: 'Clear',
             },
-          }
-        }
+          },
+        },
       }
     },
     methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
         const temp = this.locale1
         this.locale1 = this.locale2
         this.locale2 = temp
-      }
-    }
+      },
+    },
   }
 </script>
-
 ```
 
 :::
 
 ### ConfigProvider Attributes
 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
-| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
+| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
+| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
+| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -       |
diff --git a/website/docs/fr-FR/config-provider.md b/website/docs/fr-FR/config-provider.md
index d7574f6d4b..b3ae7cbfa6 100644
--- a/website/docs/fr-FR/config-provider.md
+++ b/website/docs/fr-FR/config-provider.md
@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
 ```html
 <div>
   <el-config-provider :locale="locale1">
-    <el-color-picker :modelValue="''" style="vertical-align: middle;">
+    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
   </el-config-provider>
   <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
     Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'OK',
               clear: 'Effacer',
             },
-          }
+          },
         },
         locale2: {
           name: 'en',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'Confirm',
               clear: 'Clear',
             },
-          }
-        }
+          },
+        },
       }
     },
     methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
         const temp = this.locale1
         this.locale1 = this.locale2
         this.locale2 = temp
-      }
-    }
+      },
+    },
   }
 </script>
-
 ```
 
 :::
 
 ### ConfigProvider Attributes
 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
-| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
+| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
+| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
+| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -       |
diff --git a/website/docs/jp/config-provider.md b/website/docs/jp/config-provider.md
index 9d931cb632..e5d91147bb 100644
--- a/website/docs/jp/config-provider.md
+++ b/website/docs/jp/config-provider.md
@@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching
 ```html
 <div>
   <el-config-provider :locale="locale1">
-    <el-color-picker :modelValue="''" style="vertical-align: middle;">
+    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
   </el-config-provider>
   <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
     Switch Lang
@@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: 'はい',
               clear: 'クリア',
             },
-          }
+          },
         },
         locale2: {
           name: 'zh-cn',
@@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching
               confirm: '确定',
               clear: '清除',
             },
-          }
-        }
+          },
+        },
       }
     },
     methods: {
@@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching
         const temp = this.locale1
         this.locale1 = this.locale2
         this.locale2 = temp
-      }
-    }
+      },
+    },
   }
 </script>
-
 ```
 
 :::
 
 ### ConfigProvider Attributes
 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
-| locale | Locale Object | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |
+| Attribute | Description                                                                                                                                                       | Type                                 | Accepted Values                                                                         | Default |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
+| locale    | Locale Object                                                                                                                                                     | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
+| i18n      | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | -                                                                                       | -       |
diff --git a/website/docs/zh-CN/config-provider.md b/website/docs/zh-CN/config-provider.md
index 5544ed4472..1d0ba04e3f 100644
--- a/website/docs/zh-CN/config-provider.md
+++ b/website/docs/zh-CN/config-provider.md
@@ -11,7 +11,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
 ```html
 <div>
   <el-config-provider :locale="locale1">
-    <el-color-picker :modelValue="''" style="vertical-align: middle;">
+    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
   </el-config-provider>
   <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
     切换语言
@@ -30,7 +30,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
               confirm: '确定',
               clear: '清空',
             },
-          }
+          },
         },
         locale2: {
           name: 'en',
@@ -39,8 +39,8 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
               confirm: 'Confirm',
               clear: 'Clear',
             },
-          }
-        }
+          },
+        },
       }
     },
     methods: {
@@ -48,18 +48,17 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在
         const temp = this.locale1
         this.locale1 = this.locale2
         this.locale2 = temp
-      }
-    }
+      },
+    },
   }
 </script>
-
 ```
 
 :::
 
 ### ConfigProvider 属性
 
-| 参数   | 说明         | 类型             | 可选值                                                                                  | 默认值  |
-| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- |
-| locale | 翻译文本对象 | Object\<Language\> | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
-| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - |
+| 参数   | 说明                                                                                               | 类型                                 | 可选值                                                                                  | 默认值  |
+| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
+| locale | 翻译文本对象                                                                                       | Object\<Language\>                   | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English |
+| i18n   | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | -                                                                                       | -       |