diff --git a/core/core-frontend/src/custom-component/common/DeRuler.vue b/core/core-frontend/src/custom-component/common/DeRuler.vue
index 28d9420e35..6fca376555 100644
--- a/core/core-frontend/src/custom-component/common/DeRuler.vue
+++ b/core/core-frontend/src/custom-component/common/DeRuler.vue
@@ -134,10 +134,6 @@ defineExpose({
 </template>
 
 <style scoped lang="less">
-::-webkit-scrollbar {
-  width: 0px !important;
-  height: 0px !important;
-}
 .ruler-vertical {
   position: absolute;
   left: 30px;
@@ -170,6 +166,10 @@ defineExpose({
 .ruler-outer {
   overflow-x: auto;
   background-color: #2c2c2c;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
 }
 
 .ruler-outer-scroll {
diff --git a/core/core-frontend/src/custom-component/common/DeRulerVertical.vue b/core/core-frontend/src/custom-component/common/DeRulerVertical.vue
index 1c83edb05a..a4acb6afce 100644
--- a/core/core-frontend/src/custom-component/common/DeRulerVertical.vue
+++ b/core/core-frontend/src/custom-component/common/DeRulerVertical.vue
@@ -78,10 +78,6 @@ defineExpose({
 </template>
 
 <style scoped lang="less">
-::-webkit-scrollbar {
-  width: 0px !important;
-  height: 0px !important;
-}
 .ruler-shadow-vertical {
   position: absolute;
   width: 30px;
@@ -96,6 +92,10 @@ defineExpose({
   height: 100%;
   overflow-y: auto;
   background-color: #2c2c2c;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
 }
 
 .ruler-outer-vertical-scroll {