src/assets/css/components/common/hide-scrollbar.scss

@@ -1,16 +1,61 @@
+@use '@/assets/css/constants' as constants;
+
 .hide-scrollbar-mask {
   width: 100%;
   height: 100%;
   overflow: hidden;
-}
 
-.hide-scrollbar-selection {
-  position: relative;
-  overflow: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
+  .hide-scrollbar-selection {
+    position: relative;
+    overflow: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
 
-.hide-scrollbar-selection::-webkit-scrollbar {
-  display: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar {
+    position: absolute;
+    z-index: 1000;
+    opacity: .5;
+
+    .box {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+
+
+      .block {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background-color: constants.$font-secondary-color;
+        transition: all .2s;
+      }
+      :hover {
+        background-color: constants.$font-main-color;
+      }
+    }
+  }
+
+  .vertical-scrollbar {
+    padding: 12px 4px;
+    width: 16px;
+    height: 100%;
+    right: 0;
+    top: 0;
+  }
+
+  .horizontal-scrollbar {
+    padding: 4px 12px;
+    width: 100%;
+    height: 16px;
+    left: 0;
+    bottom: 0;
+  }
 }

src/components/common/HideScrollbar.tsx

@@ -47,6 +47,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastTouchPosition = useRef<{ x: number; y: number }>({ x: -1, y: -1 })
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
+    const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
+    const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
 
     const {
         isPreventScroll,
@@ -308,12 +310,31 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     tabIndex={0}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                        height: `calc(100vh + ${horizontalScrollbarWidth}px`
+                        height: `calc(100vh + ${horizontalScrollbarWidth}px)`
                     }}
                     {..._props}
                 >
                     {props.children}
                 </div>
+                <div hidden={!isShowVerticalScrollbar} className={'scrollbar vertical-scrollbar'}>
+                    <div className={'box'}>
+                        <div
+                            className={'block'}
+                            style={{ height: `${verticalScrollbarLength}%` }}
+                        />
+                    </div>
+                </div>
+                <div
+                    hidden={!isShowHorizontalScrollbar}
+                    className={'scrollbar horizontal-scrollbar'}
+                >
+                    <div className={'box'}>
+                        <div
+                            className={'block'}
+                            style={{ width: `${horizontalScrollbarLength}%` }}
+                        />
+                    </div>
+                </div>
             </div>
         </>
     )

src/pages/MainFramework.tsx

@@ -13,17 +13,33 @@ export const MainFrameworkContext = createContext<{
         preventScroll: boolean
         setPreventScroll: (newValue: boolean) => void
     }
+    showVerticalScrollbarState: {
+        showVerticalScrollbar: boolean
+        setShowVerticalScrollbar: (newValue: boolean) => void
+    }
+    showHorizontalScrollbarState: {
+        showHorizontalScrollbar: boolean
+        setShowHorizontalScrollbar: (newValue: boolean) => void
+    }
     hideScrollbarRef: React.RefObject<HideScrollbarElement>
 }>({
     navbarHiddenState: {
         navbarHidden: false,
         setNavbarHidden: () => undefined
     },
-    hideScrollbarRef: createRef(),
     preventScrollState: {
         preventScroll: false,
         setPreventScroll: () => undefined
-    }
+    },
+    showVerticalScrollbarState: {
+        showVerticalScrollbar: false,
+        setShowVerticalScrollbar: () => undefined
+    },
+    showHorizontalScrollbarState: {
+        showHorizontalScrollbar: false,
+        setShowHorizontalScrollbar: () => undefined
+    },
+    hideScrollbarRef: createRef()
 })
 
 const MainFramework: React.FC = () => {
@@ -36,6 +52,8 @@ const MainFramework: React.FC = () => {
 
     const [navbarHidden, setNavbarHidden] = useState(true)
     const [preventScroll, setPreventScroll] = useState(false)
+    const [showVerticalScrollbar, setShowVerticalScrollbar] = useState(false)
+    const [showHorizontalScrollbar, setShowHorizontalScrollbar] = useState(false)
 
     useEffect(() => {
         setNavbarHidden(false)
@@ -73,6 +91,14 @@ const MainFramework: React.FC = () => {
                         value={{
                             navbarHiddenState: { navbarHidden, setNavbarHidden },
                             preventScrollState: { preventScroll, setPreventScroll },
+                            showVerticalScrollbarState: {
+                                showVerticalScrollbar,
+                                setShowVerticalScrollbar
+                            },
+                            showHorizontalScrollbarState: {
+                                showHorizontalScrollbar,
+                                setShowHorizontalScrollbar
+                            },
                             hideScrollbarRef
                         }}
                     >