src/assets/css/common.scss

@@ -3,6 +3,11 @@ $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
 
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
 .body {
   color: $font-main-color;
   user-select: none;
@@ -102,29 +107,4 @@ $font-secondary-color: #9E9E9E;
     width: 23px;
     height: 23px;
   }
-}
-
-.loading-mask {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  background-color: rgba(200, 200, 200, 0.2);
-}
-
-.fit-fullscreen {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
-
-.fit-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
 }

src/assets/css/fit-center.scss

@@ -0,0 +1,7 @@
+.fit-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

src/assets/css/fit-fullscreen.scss

@@ -0,0 +1,5 @@
+.fit-fullscreen {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}

src/assets/css/header.scss

@@ -7,6 +7,7 @@
   z-index: 1;
   width: 100%;
   height: 70px;
+  min-width: 900px;
   background-color: white;
   border: {
     bottom: {

src/assets/css/hide-scrollbar.scss

@@ -1,15 +1,16 @@
-body {
+.hide-scrollbar-mask {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-#root {
-  height: 100vh;
-  width: 100vw;
+.hide-scrollbar-selection {
+  position: relative;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-#hide-scrollbar {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  overflow: scroll;
+.hide-scrollbar-selection::-webkit-scrollbar {
+  display: none;
 }

src/assets/css/loading-mask.scss

@@ -0,0 +1,10 @@
+.loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}

src/components/FitCenter.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@/assets/css/fit-center.scss'
 
 const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
     return (

src/components/FitFullScreen.tsx

@@ -1,3 +1,5 @@
+import '@/assets/css/fit-fullscreen.scss'
+
 interface FitFullscreenProps extends PropsWithChildren {
     zIndex?: number
     backgroundColor?: string

src/components/HideScrollbar.tsx

@@ -151,15 +151,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
 
     return (
         <>
-            <div
-                ref={rootRef}
-                id={'hide-scrollbar'}
-                style={{
-                    width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                    height: `calc(100vh + ${horizontalScrollbarWidth}px`
-                }}
-            >
-                {props.children}
+            <div className={'hide-scrollbar-mask'}>
+                <div
+                    ref={rootRef}
+                    className={'hide-scrollbar-selection'}
+                    style={{
+                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
+                        height: `calc(100vh + ${horizontalScrollbarWidth}px`
+                    }}
+                >
+                    {props.children}
+                </div>
             </div>
         </>
     )

src/components/Home.tsx

@@ -11,9 +11,11 @@ const Home: React.FC = () => {
         navbarHiddenState: { navbarHidden, setNavbarHidden }
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(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 (
         <>
-            <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
+            <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
                 <FitCenter>
                     <div className={'center-box'}>
                         <div className={'big-logo'}>FatWeb</div>

src/components/LoadingMask.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import FitFullScreen from '@/components/FitFullScreen.tsx'
 import { COLOR_FONT_MAIN } from '@/constants/Common.constants.ts'
+import '@/assets/css/loading-mask.scss'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (

src/pages/MainFramework.tsx

@@ -25,11 +25,16 @@ const MainFramework: React.FC = () => {
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
+    const pathname = useLocation().pathname
+    useEffect(() => {
+        setNavbarHidden(false)
+    }, [pathname])
+
     return (
         <>
             <HideScrollbar ref={hideScrollbarRef}>
                 <div className={'body'}>
-                    <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
+                    <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
                             <span className={'title'}>FatWeb</span>
                         </a>