Add auto hide scrollbar to HideScrollbar

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 {

src/components/common/HideScrollbar.tsx

@@ -14,6 +14,7 @@ interface HideScrollbarProps
     minHeight?: string | number
     scrollbarWidth?: string | number
     animationTransitionTime?: number
+    autoHideWaitingTime?: number
 }
 
 export interface HideScrollbarElement {
@@ -147,16 +148,20 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
     const [refreshTime, setRefreshTime] = useState(0)
+
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
     const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
     const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
     const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
+    const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false)
+
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
     const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
     const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
     const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
     const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
+    const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
 
     const {
         isPreventScroll,
@@ -170,12 +175,37 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minHeight,
         scrollbarWidth,
         animationTransitionTime,
+        autoHideWaitingTime,
         ..._props
     } = props
 
     const isPreventAnyScroll =
         isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
 
+    useEffect(() => {
+        if (autoHideWaitingTime === undefined) {
+            return
+        }
+        setVerticalScrollbarAutoHide(false)
+        if (autoHideWaitingTime > 0) {
+            setTimeout(() => {
+                setVerticalScrollbarAutoHide(true)
+            }, autoHideWaitingTime)
+        }
+    }, [autoHideWaitingTime, verticalScrollbarPosition])
+
+    useEffect(() => {
+        if (autoHideWaitingTime === undefined) {
+            return
+        }
+        setHorizontalScrollbarAutoHide(false)
+        if (autoHideWaitingTime > 0) {
+            setTimeout(() => {
+                setHorizontalScrollbarAutoHide(true)
+            }, autoHideWaitingTime)
+        }
+    }, [autoHideWaitingTime, horizontalScrollbarPosition])
+
     const handleDefaultTouchStart = useCallback(
         (event: React.TouchEvent) => {
             if (event.touches.length !== 1 || isPreventScroll) {
@@ -506,7 +536,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         ((isHiddenVerticalScrollbarWhenFull ?? true) &&
                             verticalScrollbarLength >= 100)
                     }
-                    className={'scrollbar vertical-scrollbar'}
+                    className={`scrollbar vertical-scrollbar${
+                        verticalScrollbarAutoHide ? ' hide' : ''
+                    }`}
                     style={{
                         height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
                         top: maskRef.current?.clientTop,
@@ -543,7 +575,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
                             horizontalScrollbarLength >= 100)
                     }
-                    className={'scrollbar horizontal-scrollbar'}
+                    className={`scrollbar horizontal-scrollbar${
+                        horizontalScrollbarAutoHide ? ' hide' : ''
+                    }`}
                     style={{
                         width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
                         left: maskRef.current?.clientLeft,

src/pages/ToolsFramework.tsx

@@ -100,6 +100,7 @@ const ToolsFramework: React.FC = () => {
                                 isShowVerticalScrollbar={true}
                                 scrollbarWidth={2}
                                 animationTransitionTime={300}
+                                autoHideWaitingTime={800}
                                 ref={hideScrollbarRef}
                             >
                                 <ul>