diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 060ae4f..5d967de 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -11,9 +11,11 @@ const Home: React.FC = () => { navbarHiddenState: { navbarHidden, setNavbarHidden } } = useContext(MainFrameworkContext) const fitFullScreenRef = useRef(null) + const pathname = useLocation().pathname const [slogan, setSlogan] = useState('') const [sloganType, setSloganType] = useState(true) + const typeText = '/* 因为热爱 所以折腾 */' if (sloganType) { setTimeout(() => { @@ -33,36 +35,42 @@ const Home: React.FC = () => { }, 50) } - const handleScrollDown = () => { - hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0) - } - - useEffect(() => { - const hideScrollbarDOM = hideScrollbarRef.current - const scrollListener = () => { - if ( - hideScrollbarDOM && - fitFullScreenRef.current && - hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight - ) { - if (!navbarHidden) { - setNavbarHidden(true) - } - } else { - if (navbarHidden) { - setNavbarHidden(false) - } + const hideScrollbarDOM = hideScrollbarRef.current + const scrollListener = useCallback(() => { + if ( + hideScrollbarDOM && + fitFullScreenRef.current && + hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight + ) { + if (!navbarHidden) { + setNavbarHidden(true) + } + } else { + if (navbarHidden) { + setNavbarHidden(false) } } + }, [hideScrollbarDOM, navbarHidden, setNavbarHidden]) + + useEffect(() => { + hideScrollbarDOM?.removeEventListener('scroll', scrollListener) hideScrollbarDOM?.addEventListener('scroll', scrollListener) return () => { hideScrollbarDOM?.removeEventListener('scroll', scrollListener) } - }, [hideScrollbarRef, navbarHidden, setNavbarHidden]) + }, [hideScrollbarDOM, scrollListener]) + + useEffect(() => { + scrollListener() + }, [pathname, scrollListener]) + + const handleScrollDown = () => { + hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0) + } return ( <> - +
FatWeb