src/components/Home.tsx

@@ -8,13 +8,15 @@ import { MainFrameworkContext } from '@/pages/MainFramework.tsx'
 const Home: React.FC = () => {
     const {
         hideScrollbarRef,
-        navbarHiddenState: { navbarHidden, setNavbarHidden }
+        navbarHiddenState: { setNavbarHidden },
+        preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
     const pathname = useLocation().pathname
 
     const [slogan, setSlogan] = useState('')
     const [sloganType, setSloganType] = useState(true)
+    const [showSlogan, setShowSlogan] = useState(true)
 
     const typeText = '/* 因为热爱 所以折腾 */'
     if (sloganType) {
@@ -35,59 +37,72 @@ const Home: React.FC = () => {
         }, 50)
     }
 
-    const hideScrollbarDOM = hideScrollbarRef.current
+    useEffect(() => {
-    const scrollListener = useCallback(() => {
+        setTimeout(() => {
-        if (
+            setNavbarHidden(true)
-            hideScrollbarDOM &&
+        })
-            fitFullScreenRef.current &&
+    }, [setNavbarHidden])
-            hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight
+
-        ) {
+    useEffect(() => {
-            if (!navbarHidden) {
+        setNavbarHidden(true)
-                setNavbarHidden(true)
+    }, [pathname, setNavbarHidden])
-            }
+
-        } else {
+    const handleScrollToDown = () => {
-            if (navbarHidden) {
+        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
+    }
+
+    const handleScrollToTop = () => {
+        hideScrollbarRef.current?.scrollY(0)
+    }
+
+    const handleWheel = (event: React.WheelEvent) => {
+        if (showSlogan) {
+            if (event.deltaY > 0) {
+                handleScrollToDown()
+                setPreventScroll(false)
+                setShowSlogan(false)
                 setNavbarHidden(false)
             }
+        } else {
+            console.log(
+                hideScrollbarRef.current?.getY() + ' ' + fitFullScreenRef.current?.offsetHeight
+            )
+            if (
+                hideScrollbarRef.current &&
+                fitFullScreenRef.current &&
+                hideScrollbarRef.current.getY() < fitFullScreenRef.current.offsetHeight
+            ) {
+                console.log('上翻')
+                setPreventScroll(true)
+                setShowSlogan(true)
+                setNavbarHidden(true)
+                handleScrollToTop()
+            }
         }
-    }, [hideScrollbarDOM, navbarHidden, setNavbarHidden])
-
-    useEffect(() => {
-        hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
-        hideScrollbarDOM?.addEventListener('scroll', scrollListener)
-        return () => {
-            hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
-        }
-    }, [hideScrollbarDOM, scrollListener])
-
-    useEffect(() => {
-        scrollListener()
-    }, [pathname, scrollListener])
-
-    const handleScrollDown = () => {
-        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
     }
 
     return (
         <>
-            <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
+            <div onWheel={handleWheel}>
-                <FitCenter>
+                <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
-                    <div className={'center-box'}>
+                    <FitCenter>
-                        <div className={'big-logo'}>FatWeb</div>
+                        <div className={'center-box'}>
-                        <span id={'slogan'} className={'slogan'}>
+                            <div className={'big-logo'}>FatWeb</div>
-                            {slogan || <>&nbsp;</>}
+                            <span id={'slogan'} className={'slogan'}>
-                        </span>
+                                {slogan || <>&nbsp;</>}
-                    </div>
+                            </span>
-                    <div className={'scroll-down'} onClick={handleScrollDown}>
+                        </div>
-                        <Icon
+                        <div className={'scroll-down'} onClick={handleScrollToDown}>
-                            component={IconFatwebDown}
+                            <Icon
-                            style={{ fontSize: '1.8em', color: '#666' }}
+                                component={IconFatwebDown}
-                        />
+                                style={{ fontSize: '1.8em', color: '#666' }}
-                    </div>
+                            />
-                </FitCenter>
+                        </div>
-            </FitFullScreen>
+                    </FitCenter>
-            <FitFullScreen />
+                </FitFullScreen>
-            <FitFullScreen />
+                <FitFullScreen />
+                <FitFullScreen />
+            </div>
         </>
     )
 }

src/pages/MainFramework.tsx

@@ -35,28 +35,15 @@ const MainFramework: React.FC = () => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
 
     const [navbarHidden, setNavbarHidden] = useState(true)
-    const [preventScroll, setPreventScroll] = useState(false)
+    const [preventScroll, setPreventScroll] = useState(true)
 
     useEffect(() => {
         setNavbarHidden(false)
     }, [pathname])
 
-    const handleOnWheel = useCallback((event: React.WheelEvent) => {
-        console.log(event)
-    }, [])
-
-    const handleOnScroll = useCallback((event: React.UIEvent) => {
-        console.log(event)
-    }, [])
-
     return (
         <>
-            <HideScrollbar
+            <HideScrollbar ref={hideScrollbarRef} isPreventScroll={preventScroll}>
-                ref={hideScrollbarRef}
-                onWheel={handleOnWheel}
-                onScroll={handleOnScroll}
-                isPreventScroll={preventScroll}
-            >
                 <div className={'body'}>
                     <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>