Merge pull request 'Fixed the bug of being unable to use ctrl+scroll wheel to adjust zoom. Add full page scroll to Home' (#14) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#14

src/components/HideScrollbar.tsx

@@ -45,7 +45,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
 
     const { isPreventScroll, ..._props } = props
     const handleDefaultWheel = useCallback((event: WheelEvent) => {
+        if (!event.altKey && !event.ctrlKey) {
             event.preventDefault()
+        }
     }, [])
 
     const handleDefaultTouchmove = useCallback((event: TouchEvent) => {
@@ -200,7 +202,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         return () => {
             window.removeEventListener('resize', windowResizeListener)
         }
-    }, [isPreventScroll])
+    }, [
+        handleDefaultClickMiddleMouseButton,
+        handleDefaultTouchmove,
+        handleDefaultWheel,
+        isPreventScroll
+    ])
 
     return (
         <>

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,30 +45,53 @@ const Home: React.FC = () => {
         })
     }, [setNavbarHidden, setPreventScroll])
 
-    const handleScrollToDown = () => {
+    const handleScrollToContent = (index: number) => {
-        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
+        return () => {
+            if (!index) {
+                setNavbarHidden(true)
+                hideScrollbarRef.current?.scrollY(0)
+            } else {
+                hideScrollbarRef.current?.scrollY(
+                    (fitFullScreenRef.current?.offsetHeight ?? 0) * index
+                )
                 setNavbarHidden(false)
             }
-
+        }
-    const handleScrollToTop = () => {
-        hideScrollbarRef.current?.scrollY(0)
-        setNavbarHidden(true)
     }
 
     const handleWheel = (event: React.WheelEvent) => {
+        if (event.altKey || event.ctrlKey) {
+            return
+        }
+
         if (event.deltaY > 0) {
-            handleScrollToDown()
+            if (currentContent >= content.length) {
-            setNavbarHidden(false)
+                return
+            }
+            handleScrollToContent(currentContent + 1)()
+            clearTimeout(scrollTimeout.current ?? 0)
+            scrollTimeout.current = setTimeout(() => {
+                setCurrentContent(currentContent + 1)
+                console.log(`up ${currentContent + 1}`)
+            }, 500)
         } else {
-            handleScrollToTop()
+            if (currentContent <= 0) {
-            setNavbarHidden(true)
+                return
+            }
+            handleScrollToContent(currentContent - 1)()
+            clearTimeout(scrollTimeout.current ?? 0)
+            scrollTimeout.current = setTimeout(() => {
+                setCurrentContent(currentContent - 1)
+                console.log(`down ${currentContent - 1}`)
+            }, 500)
         }
     }
 
-    return (
+    const content = [
-        <>
+        {
-            <div onWheel={handleWheel}>
+            backgroundColor: '#FBFBFB',
-                <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
+            ref: fitFullScreenRef,
+            children: (
                 <FitCenter>
                     <div className={'center-box'}>
                         <div className={'big-logo'}>FatWeb</div>
@@ -73,16 +99,25 @@ const Home: React.FC = () => {
                             {slogan || <>&nbsp;</>}
                         </span>
                     </div>
-                        <div className={'scroll-down'} onClick={handleScrollToDown}>
+                    <div className={'scroll-down'} onClick={handleScrollToContent(1)}>
                         <Icon
                             component={IconFatwebDown}
                             style={{ fontSize: '1.8em', color: '#666' }}
                         />
                     </div>
                 </FitCenter>
-                </FitFullScreen>
+            )
-                <FitFullScreen />
+        },
-                <FitFullScreen />
+        { children: <FitCenter>2</FitCenter> },
+        { children: <FitCenter>3</FitCenter> }
+    ]
+
+    return (
+        <>
+            <div onWheel={handleWheel}>
+                {content.map((element, index) => {
+                    return <FitFullScreen key={index} {...element} />
+                })}
             </div>
         </>
     )