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/FitFullScreen.tsx b/src/components/FitFullScreen.tsx index edacf9a..35e44ac 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/FitFullScreen.tsx @@ -1,6 +1,12 @@ 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 @@ -42,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 || <> }
-
+
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 ( <> - +