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] 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} />
                 })}