diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index c161ddb..ff7aaaf 100644 --- a/src/assets/css/common.scss +++ b/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; diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss index 5397f58..144b156 100644 --- a/src/assets/css/home.scss +++ b/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%, diff --git a/src/components/FitCenter.tsx b/src/components/FitCenter.tsx index 15bee2c..3cd08bd 100644 --- a/src/components/FitCenter.tsx +++ b/src/components/FitCenter.tsx @@ -3,7 +3,7 @@ import React from 'react' const FitCenter: React.FC = (props: PropsWithChildren) => { return ( <> -
{props.children}
+
{props.children}
) } diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx index 5a6d7bb..35e44ac 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/FitFullScreen.tsx @@ -1,10 +1,16 @@ import React from 'react' -const FitFullScreen: React.FC = (props: FitFullscreenProps) => { +interface FitFullscreenProps extends PropsWithChildren { + zIndex?: number + backgroundColor?: string + ref?: RefObject +} + +const FitFullScreen: React.FC = (props) => { return ( <>
= (prop: PropsWithChildren) => { +interface HideScrollbarProps extends PropsWithChildren { + getHideScrollbarRef: (hideScrollbarRef: RefObject) => void +} + +const HideScrollbar: React.FC = (props) => { const hideScrollbarRef = useRef(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 = (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 = (prop: PropsWithChildren) => height: `calc(100vh + ${horizontalScrollbarWidth}px` }} > - {prop.children} + {props.children}
) diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 948ef5c..ff100c6 100644 --- a/src/components/Home.tsx +++ b/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(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 ( <> - +
FatWeb
@@ -36,7 +46,7 @@ const Home: React.FC = () => { {slogan || <> }
-
+
{ return ( <> -
+
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 0c45d63..5d08abb 100644 --- a/src/pages/MainFramework.tsx +++ b/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>() const routeId = useMatches()[1].id const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children + const getHideScrollbarRef = (ref: RefObject) => { + 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 ( <> - +