Merge pull request 'Fix the scrollbar displayed when the browser freezes. Add scroll controller.' (#10) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#10

src/assets/css/common.scss

@@ -104,7 +104,7 @@ $font-secondary-color: #9E9E9E;
   }
 }
 
-#loading-mask {
+.loading-mask {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -115,13 +115,13 @@ $font-secondary-color: #9E9E9E;
   background-color: rgba(200, 200, 200, 0.2);
 }
 
-#fit-fullscreen {
+.fit-fullscreen {
   position: relative;
   width: 100%;
   height: 100vh;
 }
 
-#fit-center {
+.fit-center {
   display: flex;
   justify-content: center;
   align-items: center;

src/assets/css/home.scss

@@ -21,9 +21,10 @@
   color: #666;
 }
 
-.scroll-to-down {
+.scroll-down {
   position: absolute;
-  bottom: 20px;
+  bottom: 10px;
+  padding: 20px;
   animation: 1.5s infinite;
   @include mixins.unique-keyframes {
     0%,

src/components/FitCenter.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
     return (
         <>
-            <div id={'fit-center'}>{props.children}</div>
+            <div className={'fit-center'}>{props.children}</div>
         </>
     )
 }

src/components/FitFullScreen.tsx

@@ -1,10 +1,16 @@
 import React from 'react'
 
-const FitFullScreen: React.FC<FitFullscreenProps> = (props: FitFullscreenProps) => {
+interface FitFullscreenProps extends PropsWithChildren {
+    zIndex?: number
+    backgroundColor?: string
+    ref?: RefObject<HTMLDivElement>
+}
+
+const FitFullScreen: React.FC<FitFullscreenProps> = (props) => {
     return (
         <>
             <div
-                id={'fit-fullscreen'}
+                className={'fit-fullscreen'}
                 style={{
                     zIndex: props.zIndex,
                     backgroundColor: props.backgroundColor

src/components/HideScrollbar.tsx

@@ -1,11 +1,17 @@
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
 import '@/assets/css/hide-scrollbar.scss'
 
-const HideScrollbar: React.FC<PropsWithChildren> = (prop: PropsWithChildren) => {
+interface HideScrollbarProps extends PropsWithChildren {
+    getHideScrollbarRef: (hideScrollbarRef: RefObject<HTMLElement>) => void
+}
+
+const HideScrollbar: React.FC<HideScrollbarProps> = (props) => {
     const hideScrollbarRef = useRef<HTMLDivElement>(null)
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
 
+    props.getHideScrollbarRef(hideScrollbarRef)
+
     useEffect(() => {
         const hideScrollbarElement = hideScrollbarRef.current
 
@@ -21,10 +27,14 @@ const HideScrollbar: React.FC<PropsWithChildren> = (prop: PropsWithChildren) =>
             return windowResizeListener
         }
 
+        setTimeout(() => {
+            windowResizeListener()
+        }, 1000)
+
         window.addEventListener('resize', windowResizeListener())
 
         return () => {
-            window.removeEventListener('resize', windowResizeListener())
+            window.removeEventListener('resize', windowResizeListener)
         }
     }, [])
 
@@ -38,7 +48,7 @@ const HideScrollbar: React.FC<PropsWithChildren> = (prop: PropsWithChildren) =>
                     height: `calc(100vh + ${horizontalScrollbarWidth}px`
                 }}
             >
-                {prop.children}
+                {props.children}
             </div>
         </>
     )

src/components/Home.tsx

@@ -3,8 +3,14 @@ import '@/assets/css/home.scss'
 import FitFullScreen from '@/components/FitFullScreen.tsx'
 import FitCenter from '@/components/FitCenter.tsx'
 import Icon from '@ant-design/icons'
+import { MainFrameworkContext } from '@/pages/MainFramework.tsx'
 
 const Home: React.FC = () => {
+    const {
+        controllers: { scrollY }
+    } = useContext(MainFrameworkContext)
+    const fitFullScreenRef = useRef<HTMLDivElement>(null)
+
     const [slogan, setSlogan] = useState('')
     const [sloganType, setSloganType] = useState(true)
     const typeText = '/* 因为热爱 所以折腾 */'
@@ -26,9 +32,13 @@ const Home: React.FC = () => {
         }, 50)
     }
 
+    const handleScrollDown = () => {
+        scrollY(1000)
+    }
+
     return (
         <>
-            <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'}>
+            <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
                 <FitCenter>
                     <div className={'center-box'}>
                         <div className={'big-logo'}>FatWeb</div>
@@ -36,7 +46,7 @@ const Home: React.FC = () => {
                             {slogan || <>&nbsp;</>}
                         </span>
                     </div>
-                    <div className={'scroll-to-down'}>
+                    <div className={'scroll-down'} onClick={handleScrollDown}>
                         <Icon
                             component={IconFatwebDown}
                             style={{ fontSize: '1.8em', color: '#666' }}

src/components/LoadingMask.tsx

@@ -16,7 +16,7 @@ const LoadingMask: React.FC = () => {
     return (
         <>
             <FitFullScreen>
-                <div id={'loading-mask'}>
+                <div className={'loading-mask'}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
             </FitFullScreen>

src/pages/MainFramework.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react'
+import React from 'react'
 import '@/assets/css/header.scss'
 import LoadingMask from '@/components/LoadingMask.tsx'
 import router from '@/router'
@@ -9,21 +9,129 @@ export const MainFrameworkContext = createContext<{
         navbarHidden: boolean
         setNavbarHidden: (newValue: boolean) => void
     }
+    controllers: {
+        scrollX(x: number): void
+        scrollY(y: number): void
+        scrollTo(x: number, y: number): void
+        getX(): number | undefined
+        getY(): number | undefined
+        scrollLeft(length: number): void
+        scrollRight(length: number): void
+        scrollUp(length: number): void
+        scrollDown(length: number): void
+    }
 }>({
     navbarHiddenState: {
         navbarHidden: false,
         setNavbarHidden: () => undefined
+    },
+    controllers: {
+        scrollX: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        scrollY: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        scrollTo: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        getX: function (): number | undefined {
+            throw new Error('Function not implemented.')
+        },
+        getY: function (): number | undefined {
+            throw new Error('Function not implemented.')
+        },
+        scrollLeft: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        scrollRight: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        scrollUp: function (): void {
+            throw new Error('Function not implemented.')
+        },
+        scrollDown: function (): void {
+            throw new Error('Function not implemented.')
+        }
     }
 })
 
 const MainFramework: React.FC = () => {
     const [navbarHidden, setNavbarHidden] = useState(false)
+
+    const [hideScrollbarRef, setHideScrollbarRef] = useState<RefObject<HTMLElement>>()
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
+    const getHideScrollbarRef = (ref: RefObject<HTMLElement>) => {
+        setHideScrollbarRef(ref)
+    }
+
+    const hideScrollbarRefController = {
+        scrollX(x: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                left: x,
+                top: hideScrollbarRef?.current?.scrollTop,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollY(y: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                left: hideScrollbarRef?.current?.scrollLeft,
+                top: y,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollLeft(length: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                left: (hideScrollbarRef?.current?.scrollLeft ?? 0) - length,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollRight(length: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                left: (hideScrollbarRef?.current?.scrollLeft ?? 0) + length,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollUp(length: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                top: (hideScrollbarRef?.current?.scrollTop ?? 0) - length,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollDown(length: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                top: (hideScrollbarRef?.current?.scrollTop ?? 0) + length,
+                behavior: 'smooth'
+            })
+        },
+
+        scrollTo(x: number, y: number): void {
+            hideScrollbarRef?.current?.scrollTo({
+                left: x,
+                top: y,
+                behavior: 'smooth'
+            })
+        },
+
+        getX(): number | undefined {
+            return hideScrollbarRef?.current?.scrollLeft
+        },
+
+        getY(): number | undefined {
+            return hideScrollbarRef?.current?.scrollTop
+        }
+    }
+
     return (
         <>
-            <HideScrollbar>
+            <HideScrollbar getHideScrollbarRef={getHideScrollbarRef}>
                 <div className={'body'}>
                     <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
@@ -50,7 +158,10 @@ const MainFramework: React.FC = () => {
                     </header>
 
                     <MainFrameworkContext.Provider
-                        value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
+                        value={{
+                            navbarHiddenState: { navbarHidden, setNavbarHidden },
+                            controllers: hideScrollbarRefController
+                        }}
                     >
                         <Suspense
                             fallback={

src/vite-env.d.ts

@@ -6,11 +6,6 @@ type RouteHandle = {
     auth?: boolean
 }
 
-interface FitFullscreenProps extends PropsWithChildren {
-    zIndex?: number
-    backgroundColor?: string
-}
-
 type _Response<T> = {
     code: number
     msg: string

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
                 'react-router',
                 'react-router-dom',
                 {
-                    react: ['Suspense'],
+                    react: ['Suspense', 'createContext'],
                     'react-router': ['useMatches', 'RouterProvider'],
                     'react-router-dom': ['createBrowserRouter'],
                     antd: ['message']
@@ -38,7 +38,7 @@ export default defineConfig({
                 },
                 {
                     from: 'react',
-                    imports: ['PropsWithChildren'],
+                    imports: ['PropsWithChildren', 'RefObject'],
                     type: true
                 }
             ],