From f52ad7483c4da6ad43dbd2da8e1a92887f218758 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 12 Sep 2023 00:01:53 +0800
Subject: [PATCH 1/3] Fixed the bug of being unable to use ctrl+scroll wheel to
 adjust zoom

---
 src/components/HideScrollbar.tsx | 4 +++-
 src/components/Home.tsx          | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/HideScrollbar.tsx b/src/components/HideScrollbar.tsx
index 76a3714..91dfd0f 100644
--- a/src/components/HideScrollbar.tsx
+++ b/src/components/HideScrollbar.tsx
@@ -45,7 +45,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
 
     const { isPreventScroll, ..._props } = props
     const handleDefaultWheel = useCallback((event: WheelEvent) => {
-        event.preventDefault()
+        if (!event.altKey && !event.ctrlKey) {
+            event.preventDefault()
+        }
     }, [])
 
     const handleDefaultTouchmove = useCallback((event: TouchEvent) => {
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index afde976..9a47331 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -53,6 +53,10 @@ const Home: React.FC = () => {
     }
 
     const handleWheel = (event: React.WheelEvent) => {
+        if (event.altKey || event.ctrlKey) {
+            return
+        }
+
         if (event.deltaY > 0) {
             handleScrollToDown()
             setNavbarHidden(false)
-- 
2.49.1


From c7d91eba8ebae59105a3b8f468f67a1bf1a010d8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 12 Sep 2023 11:57:16 +0800
Subject: [PATCH 2/3] Optimize useEffect in HideScrollbar

---
 src/components/HideScrollbar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/HideScrollbar.tsx b/src/components/HideScrollbar.tsx
index 91dfd0f..8e0e0b7 100644
--- a/src/components/HideScrollbar.tsx
+++ b/src/components/HideScrollbar.tsx
@@ -202,7 +202,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         return () => {
             window.removeEventListener('resize', windowResizeListener)
         }
-    }, [isPreventScroll])
+    }, [
+        handleDefaultClickMiddleMouseButton,
+        handleDefaultTouchmove,
+        handleDefaultWheel,
+        isPreventScroll
+    ])
 
     return (
         <>
-- 
2.49.1


From 1eadcfd4765785a7b22813ddbcf85fff90d08271 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 12 Sep 2023 15:46:25 +0800
Subject: [PATCH 3/3] Add full page scroll to Home

---
 src/components/Home.tsx | 91 +++++++++++++++++++++++++++--------------
 1 file changed, 61 insertions(+), 30 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 9a47331..51af362 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -13,8 +13,11 @@ const Home: React.FC = () => {
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
 
+    const scrollTimeout = useRef<number>()
+
     const [slogan, setSlogan] = useState('')
     const [sloganType, setSloganType] = useState(true)
+    const [currentContent, setCurrentContent] = useState(0)
 
     const typeText = '/* 因为热爱 所以折腾 */'
     if (sloganType) {
@@ -42,14 +45,18 @@ const Home: React.FC = () => {
         })
     }, [setNavbarHidden, setPreventScroll])
 
-    const handleScrollToDown = () => {
-        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
-        setNavbarHidden(false)
-    }
-
-    const handleScrollToTop = () => {
-        hideScrollbarRef.current?.scrollY(0)
-        setNavbarHidden(true)
+    const handleScrollToContent = (index: number) => {
+        return () => {
+            if (!index) {
+                setNavbarHidden(true)
+                hideScrollbarRef.current?.scrollY(0)
+            } else {
+                hideScrollbarRef.current?.scrollY(
+                    (fitFullScreenRef.current?.offsetHeight ?? 0) * index
+                )
+                setNavbarHidden(false)
+            }
+        }
     }
 
     const handleWheel = (event: React.WheelEvent) => {
@@ -58,35 +65,59 @@ const Home: React.FC = () => {
         }
 
         if (event.deltaY > 0) {
-            handleScrollToDown()
-            setNavbarHidden(false)
+            if (currentContent >= content.length) {
+                return
+            }
+            handleScrollToContent(currentContent + 1)()
+            clearTimeout(scrollTimeout.current ?? 0)
+            scrollTimeout.current = setTimeout(() => {
+                setCurrentContent(currentContent + 1)
+                console.log(`up ${currentContent + 1}`)
+            }, 500)
         } else {
-            handleScrollToTop()
-            setNavbarHidden(true)
+            if (currentContent <= 0) {
+                return
+            }
+            handleScrollToContent(currentContent - 1)()
+            clearTimeout(scrollTimeout.current ?? 0)
+            scrollTimeout.current = setTimeout(() => {
+                setCurrentContent(currentContent - 1)
+                console.log(`down ${currentContent - 1}`)
+            }, 500)
         }
     }
 
+    const content = [
+        {
+            backgroundColor: '#FBFBFB',
+            ref: fitFullScreenRef,
+            children: (
+                <FitCenter>
+                    <div className={'center-box'}>
+                        <div className={'big-logo'}>FatWeb</div>
+                        <span id={'slogan'} className={'slogan'}>
+                            {slogan || <>&nbsp;</>}
+                        </span>
+                    </div>
+                    <div className={'scroll-down'} onClick={handleScrollToContent(1)}>
+                        <Icon
+                            component={IconFatwebDown}
+                            style={{ fontSize: '1.8em', color: '#666' }}
+                        />
+                    </div>
+                </FitCenter>
+            )
+        },
+        { children: <FitCenter>2</FitCenter> },
+        { children: <FitCenter>3</FitCenter> }
+    ]
+
     return (
         <>
             <div onWheel={handleWheel}>
-                <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
-                    <FitCenter>
-                        <div className={'center-box'}>
-                            <div className={'big-logo'}>FatWeb</div>
-                            <span id={'slogan'} className={'slogan'}>
-                                {slogan || <>&nbsp;</>}
-                            </span>
-                        </div>
-                        <div className={'scroll-down'} onClick={handleScrollToDown}>
-                            <Icon
-                                component={IconFatwebDown}
-                                style={{ fontSize: '1.8em', color: '#666' }}
-                            />
-                        </div>
-                    </FitCenter>
-                </FitFullScreen>
-                <FitFullScreen />
-                <FitFullScreen />
+                {content.map((element, index) => {
+                    return <FitFullScreen key={index} {...element} />
+                })}
             </div>
         </>
     )
-- 
2.49.1