From f744748a8541ea5a37f6214d975f0bbea94cbf75 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 22 Sep 2023 17:02:15 +0800
Subject: [PATCH 1/5] Add click switch to Indicator

---
 src/assets/css/components/common/indicator.scss | 10 ++++++++--
 src/assets/css/constants.scss                   |  1 +
 src/components/home/index.tsx                   | 11 ++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.scss
index 85981c8..efe8e76 100644
--- a/src/assets/css/components/common/indicator.scss
+++ b/src/assets/css/components/common/indicator.scss
@@ -9,6 +9,7 @@
 
   .item {
     flex: auto;
+    cursor: pointer;
 
     .dot {
       width: 10px;
@@ -19,10 +20,15 @@
         color: constants.$font-secondary-color;
         style: solid;
       };
+      transition: all .2s;
+    }
+
+    :hover {
+      background-color: constants.$focus-color;
     }
   }
 
-  .active>* {
-    background-color: constants.$font-secondary-color;
+  .active > * {
+    background-color: constants.$font-secondary-color !important;
   }
 }
\ No newline at end of file
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 78451a4..2cacf14 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -2,3 +2,4 @@ $main-color: #00D4FF;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
+$focus-color: #DDDDDD
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 04edc5d..358ce98 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -126,6 +126,11 @@ const Home: React.FC = () => {
         }
     }
 
+    const handleIndicatorSwitch = (index: number) => {
+        setCurrentContent(index)
+        handleScrollToContent(index)()
+    }
+
     const content = [
         {
             backgroundColor: '#FBFBFB',
@@ -153,7 +158,11 @@ const Home: React.FC = () => {
             </div>
 
             <div hidden={navbarHidden} className={'indicator'}>
-                <Indicator total={content.length} current={currentContent} />
+                <Indicator
+                    total={content.length}
+                    current={currentContent}
+                    onSwitch={handleIndicatorSwitch}
+                />
             </div>
         </>
     )

From 420cb1378c06155debbb3d2d2006dc292ec2f452 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 22 Sep 2023 18:19:40 +0800
Subject: [PATCH 2/5] Add scrollbar to HideScrollbar (in development)

---
 .../css/components/common/hide-scrollbar.scss | 63 ++++++++++++++++---
 src/components/common/HideScrollbar.tsx       | 23 ++++++-
 src/pages/MainFramework.tsx                   | 30 ++++++++-
 3 files changed, 104 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 9d8ffe5..544de0b 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 1fcdaa7..9afbc9d 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/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>
         </>
     )
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 27a8284..26affbd 100644
--- a/src/pages/MainFramework.tsx
+++ b/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
                         }}
                     >

From 6fc0df74fa4a5c659296f0e82d8895bc82363d70 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 23 Sep 2023 16:22:57 +0800
Subject: [PATCH 3/5] Fix scroll down when horizontal scroll bug

---
 src/components/home/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 358ce98..41a88bb 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -72,7 +72,7 @@ const Home: React.FC = () => {
     }
 
     const handleWheel = (event: React.WheelEvent) => {
-        if (event.altKey || event.ctrlKey || event.shiftKey) {
+        if (event.altKey || event.ctrlKey || event.shiftKey || event.deltaY === 0) {
             return
         }
 

From 5db14cf0330d65576ef8412289d2b01c6c470ec2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 24 Sep 2023 13:01:58 +0800
Subject: [PATCH 4/5] Refactor the HideScrollbar. Finish scrollbar in
 HideScrollbar.

---
 .../css/components/common/hide-scrollbar.scss |   6 +-
 src/components/common/HideScrollbar.tsx       | 402 +++++++++++-------
 src/components/home/index.tsx                 |   2 +-
 src/pages/MainFramework.tsx                   |   7 +-
 4 files changed, 257 insertions(+), 160 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 544de0b..3aaa0b8 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -10,6 +10,10 @@
     overflow: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
+
+    .hide-scrollbar-content {
+      display: inline-block;
+    }
   }
 
   ::-webkit-scrollbar {
@@ -35,7 +39,7 @@
         height: 100%;
         border-radius: 8px;
         background-color: constants.$font-secondary-color;
-        transition: all .2s;
+        transition: background-color .2s;
       }
       :hover {
         background-color: constants.$font-main-color;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 9afbc9d..9799a81 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -43,126 +43,6 @@ export interface HideScrollbarElement {
 }
 
 const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
-    const rootRef = useRef<HTMLDivElement>(null)
-    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,
-        isPreventVerticalScroll,
-        isPreventHorizontalScroll,
-        isShowVerticalScrollbar,
-        isShowHorizontalScrollbar,
-        ..._props
-    } = props
-
-    const handleDefaultWheel = useCallback(
-        (event: WheelEvent) => {
-            if (!event.altKey && !event.ctrlKey) {
-                if (isPreventScroll) {
-                    event.preventDefault()
-                    return
-                }
-                if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) {
-                    event.preventDefault()
-                    return
-                }
-                if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
-                    event.preventDefault()
-                    return
-                }
-            }
-        },
-        [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll]
-    )
-
-    const handleDefaultTouchStart = useCallback(
-        (event: TouchEvent) => {
-            if (event.touches.length !== 1 || isPreventScroll) {
-                lastTouchPosition.current = { x: -1, y: -1 }
-                return
-            }
-
-            const { clientX, clientY } = event.touches[0]
-            lastTouchPosition.current = { x: clientX, y: clientY }
-        },
-        [isPreventScroll]
-    )
-
-    const handleDefaultTouchmove = useCallback(
-        (event: TouchEvent) => {
-            event.preventDefault()
-            if (event.touches.length !== 1 || isPreventScroll) {
-                lastTouchPosition.current = { x: -1, y: -1 }
-                return
-            }
-            const { clientX, clientY } = event.touches[0]
-
-            if (!isPreventVerticalScroll) {
-                rootRef.current?.scrollTo({
-                    top: rootRef.current?.scrollTop + (lastTouchPosition.current.y - clientY),
-                    behavior: 'instant'
-                })
-            }
-
-            if (!isPreventHorizontalScroll) {
-                rootRef.current?.scrollTo({
-                    left: rootRef.current?.scrollLeft + (lastTouchPosition.current.x - clientX),
-                    behavior: 'instant'
-                })
-            }
-
-            lastTouchPosition.current = { x: clientX, y: clientY }
-        },
-        [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll]
-    )
-
-    const handleDefaultClickMiddleMouseButton = useCallback((event: MouseEvent) => {
-        if (event.button === 1) {
-            event.preventDefault()
-        }
-    }, [])
-
-    const handleDefaultKeyDown = useCallback(
-        (event: KeyboardEvent) => {
-            if (
-                isPreventScroll &&
-                [
-                    'ArrowUp',
-                    'ArrowDown',
-                    'ArrowLeft',
-                    'ArrowRight',
-                    ' ',
-                    '',
-                    'PageUp',
-                    'PageDown',
-                    'Home',
-                    'End'
-                ].find((value) => value === event.key)
-            ) {
-                event.preventDefault()
-            }
-            if (
-                isPreventVerticalScroll &&
-                ['ArrowUp', 'ArrowDown', ' ', '', 'PageUp', 'PageDown', 'Home', 'End'].find(
-                    (value) => value === event.key
-                )
-            ) {
-                event.preventDefault()
-            }
-            if (
-                isPreventHorizontalScroll &&
-                ['ArrowLeft', 'ArrowRight'].find((value) => value === event.key)
-            ) {
-                event.preventDefault()
-            }
-        },
-        [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll]
-    )
-
     useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
         ref,
         () => {
@@ -249,78 +129,276 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         []
     )
 
-    useEffect(() => {
-        const hideScrollbarElement = rootRef.current
+    const maskRef = useRef<HTMLDivElement>(null)
+    const rootRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+    const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
+    const lastClickPositionRef = useRef({ x: -1, y: -1 })
+    const lastTouchPositionRef = useRef({ x: -1, y: -1 })
+    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
+    const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
+    const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
+    const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
+    const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
+    const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
+    const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
+    const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
 
+    const {
+        isPreventScroll,
+        isPreventVerticalScroll,
+        isPreventHorizontalScroll,
+        isShowVerticalScrollbar,
+        isShowHorizontalScrollbar,
+        ..._props
+    } = props
+
+    const isPreventAnyScroll =
+        isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
+
+    const handleDefaultTouchStart = useCallback(
+        (event: React.TouchEvent) => {
+            if (event.touches.length !== 1 || isPreventScroll) {
+                lastTouchPositionRef.current = { x: -1, y: -1 }
+                return
+            }
+
+            const { clientX, clientY } = event.touches[0]
+            lastTouchPositionRef.current = { x: clientX, y: clientY }
+        },
+        [isPreventScroll]
+    )
+
+    const handleDefaultTouchmove = useCallback(
+        (event: React.TouchEvent) => {
+            if (event.touches.length !== 1 || isPreventScroll) {
+                lastTouchPositionRef.current = { x: -1, y: -1 }
+                return
+            }
+            const { clientX, clientY } = event.touches[0]
+
+            if (!isPreventVerticalScroll) {
+                rootRef.current?.scrollTo({
+                    top: rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
+                    behavior: 'instant'
+                })
+            }
+
+            if (!isPreventHorizontalScroll) {
+                rootRef.current?.scrollTo({
+                    left: rootRef.current?.scrollLeft + (lastTouchPositionRef.current.x - clientX),
+                    behavior: 'instant'
+                })
+            }
+
+            lastTouchPositionRef.current = { x: clientX, y: clientY }
+        },
+        [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
+    )
+
+    const handleDefaultMouseDown = (event: React.MouseEvent) => {
+        if (isPreventAnyScroll)
+            if (event.button === 1) {
+                event.preventDefault()
+            }
+    }
+
+    const handleDefaultKeyDown = useCallback(
+        (event: React.KeyboardEvent) => {
+            if (
+                isPreventScroll &&
+                [
+                    'ArrowUp',
+                    'ArrowDown',
+                    'ArrowLeft',
+                    'ArrowRight',
+                    ' ',
+                    '',
+                    'PageUp',
+                    'PageDown',
+                    'Home',
+                    'End'
+                ].find((value) => value === event.key)
+            ) {
+                event.preventDefault()
+            }
+            if (
+                isPreventVerticalScroll &&
+                ['ArrowUp', 'ArrowDown', ' ', '', 'PageUp', 'PageDown', 'Home', 'End'].find(
+                    (value) => value === event.key
+                )
+            ) {
+                event.preventDefault()
+            }
+            if (
+                isPreventHorizontalScroll &&
+                ['ArrowLeft', 'ArrowRight'].find((value) => value === event.key)
+            ) {
+                event.preventDefault()
+            }
+        },
+        [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
+    )
+
+    const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
+        return (event: React.MouseEvent) => {
+            switch (eventFlag) {
+                case 'down':
+                    lastClickPositionRef.current = { x: event.clientX, y: event.clientY }
+                    switch (scrollbarFlag) {
+                        case 'vertical':
+                            setVerticalScrollbarOnClick(true)
+                            break
+                        case 'horizontal':
+                            setHorizontalScrollbarOnClick(true)
+                            break
+                    }
+                    break
+                case 'up':
+                case 'leave':
+                    setVerticalScrollbarOnClick(false)
+                    setHorizontalScrollbarOnClick(false)
+                    break
+                case 'move':
+                    if (verticalScrollbarOnClick) {
+                        rootRef.current?.scrollTo({
+                            top:
+                                rootRef.current?.scrollTop +
+                                ((event.clientY - lastClickPositionRef.current.y) /
+                                    (rootRef.current?.clientHeight ?? 1)) *
+                                    (contentRef.current?.clientHeight ?? 0),
+                            behavior: 'instant'
+                        })
+                    }
+                    if (horizontalScrollbarOnClick) {
+                        rootRef.current?.scrollTo({
+                            left:
+                                rootRef.current?.scrollLeft +
+                                ((event.clientX - lastClickPositionRef.current.x) /
+                                    (rootRef.current?.clientWidth ?? 1)) *
+                                    (contentRef.current?.clientWidth ?? 0),
+                            behavior: 'instant'
+                        })
+                    }
+                    lastClickPositionRef.current = {
+                        x: event.clientX,
+                        y: event.clientY
+                    }
+            }
+        }
+    }
+
+    const handleDefaultScroll = () => {
+        setVerticalScrollbarPosition(
+            ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
+        )
+        setHorizontalScrollbarPosition(
+            ((rootRef.current?.scrollLeft ?? 0) / (contentRef.current?.clientWidth ?? 1)) * 100
+        )
+    }
+
+    useEffect(() => {
         const windowResizeListener = () => {
             setVerticalScrollbarWidth(
-                (hideScrollbarElement?.offsetWidth ?? 0) - (hideScrollbarElement?.clientWidth ?? 0)
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
             )
             setHorizontalScrollbarWidth(
-                (hideScrollbarElement?.offsetHeight ?? 0) -
-                    (hideScrollbarElement?.clientHeight ?? 0)
+                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
             )
 
             return windowResizeListener
         }
-
         setTimeout(() => {
             windowResizeListener()
         }, 1000)
-
         window.addEventListener('resize', windowResizeListener())
-        if (isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll) {
+
+        rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
+        if (isPreventAnyScroll) {
+            const handleDefaultWheel = (event: WheelEvent) => {
+                if (!event.altKey && !event.ctrlKey) {
+                    if (isPreventScroll) {
+                        event.preventDefault()
+                        return
+                    }
+                    if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) {
+                        event.preventDefault()
+                        return
+                    }
+                    if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
+                        event.preventDefault()
+                        return
+                    }
+                }
+            }
+            wheelListenerRef.current = handleDefaultWheel
             rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
-            rootRef.current?.addEventListener('touchstart', handleDefaultTouchStart, {
-                passive: false
-            })
-            rootRef.current?.addEventListener('touchmove', handleDefaultTouchmove, {
-                passive: false
-            })
-            rootRef.current?.addEventListener('mousedown', handleDefaultClickMiddleMouseButton)
-            rootRef.current?.addEventListener('keydown', handleDefaultKeyDown)
-        } else {
-            rootRef.current?.removeEventListener('wheel', handleDefaultWheel)
-            rootRef.current?.removeEventListener('touchstart', handleDefaultTouchStart)
-            rootRef.current?.removeEventListener('touchmove', handleDefaultTouchmove)
-            rootRef.current?.removeEventListener('mousedown', handleDefaultClickMiddleMouseButton)
-            rootRef.current?.removeEventListener('keydown', handleDefaultKeyDown)
         }
 
+        rootRef.current &&
+            setVerticalScrollbarLength(
+                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
+            )
+
+        rootRef.current &&
+            setHorizontalScrollbarLength(
+                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+            )
+
         return () => {
             window.removeEventListener('resize', windowResizeListener)
         }
-    }, [
-        handleDefaultClickMiddleMouseButton,
-        handleDefaultKeyDown,
-        handleDefaultTouchStart,
-        handleDefaultTouchmove,
-        handleDefaultWheel,
-        isPreventHorizontalScroll,
-        isPreventScroll,
-        isPreventVerticalScroll
-    ])
+    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
 
     return (
         <>
-            <div className={'hide-scrollbar-mask'}>
+            <div
+                className={'hide-scrollbar-mask'}
+                ref={maskRef}
+                onMouseMove={
+                    !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
+                }
+                onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
+                onMouseLeave={
+                    !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
+                }
+            >
                 <div
                     ref={rootRef}
                     className={'hide-scrollbar-selection'}
                     tabIndex={0}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                        height: `calc(100vh + ${horizontalScrollbarWidth}px)`
+                        height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
+                        touchAction: isPreventAnyScroll ? 'none' : '',
+                        msTouchAction: isPreventAnyScroll ? 'none' : ''
                     }}
                     {..._props}
+                    onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
+                    onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
+                    onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
+                    onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
+                    onScroll={handleDefaultScroll}
                 >
-                    {props.children}
+                    <div className={'hide-scrollbar-content'} ref={contentRef}>
+                        {props.children}
+                    </div>
                 </div>
                 <div hidden={!isShowVerticalScrollbar} className={'scrollbar vertical-scrollbar'}>
                     <div className={'box'}>
                         <div
                             className={'block'}
-                            style={{ height: `${verticalScrollbarLength}%` }}
+                            style={{
+                                height: `${verticalScrollbarLength}%`,
+                                top: `clamp(0px, ${verticalScrollbarPosition}%, ${
+                                    100 - verticalScrollbarLength
+                                }%)`
+                            }}
+                            onMouseDown={
+                                !isPreventScroll && !isPreventVerticalScroll
+                                    ? handleScrollbarMouseEvent('down', 'vertical')
+                                    : undefined
+                            }
                         />
                     </div>
                 </div>
@@ -331,7 +409,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     <div className={'box'}>
                         <div
                             className={'block'}
-                            style={{ width: `${horizontalScrollbarLength}%` }}
+                            style={{
+                                width: `${horizontalScrollbarLength}%`,
+                                left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
+                                    100 - horizontalScrollbarLength
+                                }%)`
+                            }}
+                            onMouseDown={
+                                !isPreventScroll && !isPreventHorizontalScroll
+                                    ? handleScrollbarMouseEvent('down', 'horizontal')
+                                    : undefined
+                            }
                         />
                     </div>
                 </div>
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 41a88bb..f63d264 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import '@/assets/css/components/home/home.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import FitCenter from '@/components/common/FitCenter'
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 26affbd..51221c0 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -61,7 +61,12 @@ const MainFramework: React.FC = () => {
 
     return (
         <>
-            <HideScrollbar ref={hideScrollbarRef} isPreventVerticalScroll={preventScroll}>
+            <HideScrollbar
+                ref={hideScrollbarRef}
+                isPreventVerticalScroll={preventScroll}
+                isShowHorizontalScrollbar={true}
+                isShowVerticalScrollbar={true}
+            >
                 <div className={'body'}>
                     <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>

From 80045f90da32fb64b9c5ac03c6fac88ddc760cd0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 24 Sep 2023 13:42:41 +0800
Subject: [PATCH 5/5] Add touch scrollbar control to HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss |  1 +
 src/components/common/HideScrollbar.tsx       | 89 +++++++++++++++++--
 src/pages/MainFramework.tsx                   |  1 -
 3 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 3aaa0b8..a7f1b6c 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -24,6 +24,7 @@
     position: absolute;
     z-index: 1000;
     opacity: .5;
+    touch-action: none;
 
     .box {
       position: relative;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 9799a81..ded9e3b 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -133,16 +133,19 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const rootRef = useRef<HTMLDivElement>(null)
     const contentRef = useRef<HTMLDivElement>(null)
     const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
-    const lastClickPositionRef = useRef({ x: -1, y: -1 })
+    const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
+    const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
     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 [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 {
         isPreventScroll,
@@ -244,7 +247,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         return (event: React.MouseEvent) => {
             switch (eventFlag) {
                 case 'down':
-                    lastClickPositionRef.current = { x: event.clientX, y: event.clientY }
+                    lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY }
                     switch (scrollbarFlag) {
                         case 'vertical':
                             setVerticalScrollbarOnClick(true)
@@ -264,7 +267,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         rootRef.current?.scrollTo({
                             top:
                                 rootRef.current?.scrollTop +
-                                ((event.clientY - lastClickPositionRef.current.y) /
+                                ((event.clientY - lastScrollbarClickPositionRef.current.y) /
                                     (rootRef.current?.clientHeight ?? 1)) *
                                     (contentRef.current?.clientHeight ?? 0),
                             behavior: 'instant'
@@ -274,13 +277,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         rootRef.current?.scrollTo({
                             left:
                                 rootRef.current?.scrollLeft +
-                                ((event.clientX - lastClickPositionRef.current.x) /
+                                ((event.clientX - lastScrollbarClickPositionRef.current.x) /
                                     (rootRef.current?.clientWidth ?? 1)) *
                                     (contentRef.current?.clientWidth ?? 0),
                             behavior: 'instant'
                         })
                     }
-                    lastClickPositionRef.current = {
+                    lastScrollbarClickPositionRef.current = {
                         x: event.clientX,
                         y: event.clientY
                     }
@@ -288,6 +291,65 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         }
     }
 
+    const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
+        return (event: React.TouchEvent) => {
+            switch (eventFlag) {
+                case 'start':
+                    if (event.touches.length !== 1) {
+                        return
+                    }
+                    lastScrollbarTouchPositionRef.current = {
+                        x: event.touches[0].clientX,
+                        y: event.touches[0].clientY
+                    }
+                    switch (scrollbarFlag) {
+                        case 'vertical':
+                            setVerticalScrollbarOnTouch(true)
+                            break
+                        case 'horizontal':
+                            setHorizontalScrollbarOnTouch(true)
+                            break
+                    }
+                    break
+                case 'end':
+                case 'cancel':
+                    setVerticalScrollbarOnTouch(false)
+                    setHorizontalScrollbarOnTouch(false)
+                    break
+                case 'move':
+                    if (event.touches.length !== 1) {
+                        return
+                    }
+                    if (verticalScrollbarOnTouch) {
+                        rootRef.current?.scrollTo({
+                            top:
+                                rootRef.current?.scrollTop +
+                                ((event.touches[0].clientY -
+                                    lastScrollbarClickPositionRef.current.y) /
+                                    (rootRef.current?.clientHeight ?? 1)) *
+                                    (contentRef.current?.clientHeight ?? 0),
+                            behavior: 'instant'
+                        })
+                    }
+                    if (horizontalScrollbarOnTouch) {
+                        rootRef.current?.scrollTo({
+                            left:
+                                rootRef.current?.scrollLeft +
+                                ((event.touches[0].clientX -
+                                    lastScrollbarClickPositionRef.current.x) /
+                                    (rootRef.current?.clientWidth ?? 1)) *
+                                    (contentRef.current?.clientWidth ?? 0),
+                            behavior: 'instant'
+                        })
+                    }
+                    lastScrollbarClickPositionRef.current = {
+                        x: event.touches[0].clientX,
+                        y: event.touches[0].clientY
+                    }
+            }
+        }
+    }
+
     const handleDefaultScroll = () => {
         setVerticalScrollbarPosition(
             ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
@@ -358,10 +420,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                 onMouseMove={
                     !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
                 }
+                onTouchMove={
+                    !isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
+                }
                 onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
+                onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined}
                 onMouseLeave={
                     !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
                 }
+                onTouchCancel={
+                    !isPreventScroll ? handleScrollbarTouchEvent('cancel', 'all') : undefined
+                }
             >
                 <div
                     ref={rootRef}
@@ -399,6 +468,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                                     ? handleScrollbarMouseEvent('down', 'vertical')
                                     : undefined
                             }
+                            onTouchStart={
+                                !isPreventScroll && !isPreventVerticalScroll
+                                    ? handleScrollbarTouchEvent('start', 'vertical')
+                                    : undefined
+                            }
                         />
                     </div>
                 </div>
@@ -420,6 +494,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                                     ? handleScrollbarMouseEvent('down', 'horizontal')
                                     : undefined
                             }
+                            onTouchStart={
+                                !isPreventScroll && !isPreventHorizontalScroll
+                                    ? handleScrollbarTouchEvent('start', 'horizontal')
+                                    : undefined
+                            }
                         />
                     </div>
                 </div>
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 51221c0..d2b9da6 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -65,7 +65,6 @@ const MainFramework: React.FC = () => {
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}
-                isShowVerticalScrollbar={true}
             >
                 <div className={'body'}>
                     <header className={'nav' + (navbarHidden ? ' hide' : '')}>