生产管理系统前端 - 多滚动条问题解决

crop-x/src/styles/body.css

@@ -1,4 +1,6 @@
 .bodyFlexUpDown{
+    overflow-x:hidden;
+    overflow-y: hidden;
     height: 100vh;
     display: flex;
     flex-direction: column;
@@ -13,6 +15,7 @@
 .sidebarScroll{
     height: 100%;
     overflow-y: auto;
+    overflow-x:hidden;
 }
 .sidebarScroll>div{
     height: 100%;
@@ -21,4 +24,10 @@
 .contentScroll{
     height: 100%;
     overflow-y: auto;
+}
+
+/* 滚动条颜色变量 */
+:root {
+  --scrollbar-color: #d1d5db;
+  --scrollbar-hover: #9ca3af;
 }

crop-x/src/styles/globals.css

@@ -236,7 +236,7 @@
 
 /* 滚动条样式 */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 
@@ -245,12 +245,12 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgb(var(--border));
+  background: hsl(var(--muted-foreground));
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(var(--muted-foreground));
+  background: hsl(var(--muted-foreground));
 }
 
 /* 动画 */