From c6b6c76152724d1f9ee8953a927845fb448c8906 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 13 Sep 2023 22:52:02 +0800
Subject: [PATCH 1/2] Add mouse and keyboard control scroll

---
 src/components/home/index.tsx | 42 +++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 169d542..ab567a3 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -13,7 +13,7 @@ const Home: React.FC = () => {
 
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
     const scrollTimeout = useRef(0)
-    const touchStart = useRef(0)
+    const clickStart = useRef(0)
 
     const [currentContent, setCurrentContent] = useState(0)
 
@@ -73,11 +73,11 @@ const Home: React.FC = () => {
     }
 
     const handleTouchStart = (event: React.TouchEvent) => {
-        touchStart.current = event.touches[0].clientY
+        clickStart.current = event.touches[0].clientY
     }
 
     const handleTouchEnd = (event: React.TouchEvent) => {
-        const moveLength = touchStart.current - event.changedTouches[0].clientY
+        const moveLength = clickStart.current - event.changedTouches[0].clientY
         if (Math.abs(moveLength) < 100) {
             return
         }
@@ -89,6 +89,32 @@ const Home: React.FC = () => {
         }
     }
 
+    const handleMouseDown = (event: React.MouseEvent) => {
+        clickStart.current = event.clientY
+    }
+
+    const handleMouseUp = (event: React.MouseEvent) => {
+        const moveLength = clickStart.current - event.clientY
+        if (Math.abs(moveLength) < 100) {
+            return
+        }
+
+        if (moveLength > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'ArrowUp') {
+            handleScrollUp()
+        }
+        if (event.key === 'ArrowDown') {
+            handleScrollDown()
+        }
+    }
+
     const content = [
         {
             backgroundColor: '#FBFBFB',
@@ -101,7 +127,15 @@ const Home: React.FC = () => {
 
     return (
         <>
-            <div onWheel={handleWheel} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
+            <div
+                tabIndex={0}
+                onWheel={handleWheel}
+                onTouchStart={handleTouchStart}
+                onTouchEnd={handleTouchEnd}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onKeyDown={handleKeyDown}
+            >
                 {content.map((element, index) => {
                     return <FitFullScreen key={index} {...element} />
                 })}

From 100c8afbeedd770a4c168250f8523da67e25109a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 13 Sep 2023 23:32:02 +0800
Subject: [PATCH 2/2] Add auto homing when window resize

---
 src/components/home/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index ab567a3..31e793b 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import FitCenter from '@/components/common/FitCenter'
 import { MainFrameworkContext } from '@/pages/MainFramework'
@@ -24,6 +24,14 @@ const Home: React.FC = () => {
         })
     }, [setNavbarHidden, setPreventScroll])
 
+    useLayoutEffect(() => {
+        const handleWindowResize = () => {
+            handleScrollToContent(currentContent)()
+        }
+        window.addEventListener('resize', handleWindowResize)
+        return () => window.removeEventListener('resize', handleWindowResize)
+    })
+
     const handleScrollToContent = (index: number) => {
         return () => {
             if (!index) {