From 0c1ec83796d100e24e4b45d3e2f3e5109d82096e Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 4 Dec 2022 14:59:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/sass/scrollbar.scss | 49 ++++++++++++----------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/resources/assets/sass/scrollbar.scss b/resources/assets/sass/scrollbar.scss
index e4cdb13f9..da3bc5699 100644
--- a/resources/assets/sass/scrollbar.scss
+++ b/resources/assets/sass/scrollbar.scss
@@ -1,24 +1,32 @@
+/* 滚动条美化 */
 .scrollbar-overlay {
     overflow-y: auto;
     overflow-y: overlay;
     -webkit-overflow-scrolling: touch;
 
-    /* 滚动条美化 */
+    /* 滚动条尺寸 */
     &::-webkit-scrollbar {
-        width: 12px;
-        height: 12px;
+        width: 0;
+        height: 0;
     }
 
     /*滚动条滑块隐藏*/
     &::-webkit-scrollbar-thumb {
+        border: 3px solid transparent;
+        background-color: rgba(0, 0, 0, .2);
+        background-clip: content-box;
         border-radius: 12px;
-        background: rgba(0, 0, 0, 0);
-    }
+        /*让该容器的滚动条滑块显示*/
+        &:hover {
+            border: 2px solid transparent;
+            background-color: rgba(0, 0, 0, .2);
+        }
 
-    /*按下滚动条，颜色加深*/
-    &::-webkit-scrollbar-thumb:active {
-        border-radius: 12px;
-        background: rgba(0, 0, 0, .5);
+        /*按下滚动条，颜色加深*/
+        &:active {
+            border: 2px solid transparent;
+            background-color: rgba(0, 0, 0, .4);
+        }
     }
 
     /*滚动条轨道*/
@@ -29,29 +37,14 @@
 
     /*鼠标浮到容器上*/
     &:hover {
-        /*让该容器的滚动条滑块显示*/
-        &::-webkit-scrollbar-thumb {
-            border: 3px solid transparent;
-            background: rgba(0, 0, 0, .2);
-            background-clip: content-box;
-        }
-
-        /*让该容器的滚动条滑块显示*/
-        &::-webkit-scrollbar-thumb:hover {
-            border: 2px solid transparent;
-            background: rgba(0, 0, 0, .2);
-            background-clip: content-box;
-        }
-
-        /*按下滚动条，颜色加深*/
-        &::-webkit-scrollbar-thumb:active {
-            border: 2px solid transparent;
-            background: rgba(0, 0, 0, .5);
-            background-clip: content-box;
+        &::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
         }
     }
 }
 
+/* 滚动条隐藏 */
 .scrollbar-hidden {
     &::-webkit-scrollbar {
         display: none;