diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx index 169d542..31e793b 100644 --- a/src/components/home/index.tsx +++ b/src/components/home/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import FitFullScreen from '@/components/common/FitFullScreen' import FitCenter from '@/components/common/FitCenter' import { MainFrameworkContext } from '@/pages/MainFramework' @@ -13,7 +13,7 @@ const Home: React.FC = () => { const fitFullScreenRef = useRef(null) const scrollTimeout = useRef(0) - const touchStart = useRef(0) + const clickStart = useRef(0) const [currentContent, setCurrentContent] = useState(0) @@ -24,6 +24,14 @@ const Home: React.FC = () => { }) }, [setNavbarHidden, setPreventScroll]) + useLayoutEffect(() => { + const handleWindowResize = () => { + handleScrollToContent(currentContent)() + } + window.addEventListener('resize', handleWindowResize) + return () => window.removeEventListener('resize', handleWindowResize) + }) + const handleScrollToContent = (index: number) => { return () => { if (!index) { @@ -73,11 +81,11 @@ const Home: React.FC = () => { } const handleTouchStart = (event: React.TouchEvent) => { - touchStart.current = event.touches[0].clientY + clickStart.current = event.touches[0].clientY } const handleTouchEnd = (event: React.TouchEvent) => { - const moveLength = touchStart.current - event.changedTouches[0].clientY + const moveLength = clickStart.current - event.changedTouches[0].clientY if (Math.abs(moveLength) < 100) { return } @@ -89,6 +97,32 @@ const Home: React.FC = () => { } } + const handleMouseDown = (event: React.MouseEvent) => { + clickStart.current = event.clientY + } + + const handleMouseUp = (event: React.MouseEvent) => { + const moveLength = clickStart.current - event.clientY + if (Math.abs(moveLength) < 100) { + return + } + + if (moveLength > 0) { + handleScrollDown() + } else { + handleScrollUp() + } + } + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'ArrowUp') { + handleScrollUp() + } + if (event.key === 'ArrowDown') { + handleScrollDown() + } + } + const content = [ { backgroundColor: '#FBFBFB', @@ -101,7 +135,15 @@ const Home: React.FC = () => { return ( <> -
+
{content.map((element, index) => { return })}