Add auto hide scrollbar to HideScrollbar

2023-10-14 19:53:28 +08:00
parent 45f2cb21f5
commit de3e34b085
3 changed files with 54 additions and 2 deletions
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,4 +1,5 @@
@use '@/assets/css/constants' as constants;
+@use '@/assets/css/mixins' as mixins;

 .hide-scrollbar-mask {
  position: relative;
@@ -44,10 +45,26 @@
        background-color: constants.$font-secondary-color;
        transition: background-color .2s;
      }
+
      :hover {
        background-color: constants.$font-main-color;
      }
    }
+
+    &.hide {
+      display: block;
+      opacity: 0;
+      animation: 0.4s linear;
+
+      @include mixins.unique-keyframes {
+        0% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
  }

  .vertical-scrollbar {