diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..f3703eb Binary files /dev/null and b/public/logo.png differ diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss index 37180a9..03616b6 100644 --- a/src/assets/css/pages/header.scss +++ b/src/assets/css/pages/header.scss @@ -7,7 +7,7 @@ z-index: 1; width: 100%; height: 70px; - min-width: 900px; + min-width: 500px; background-color: white; border: { bottom: { diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index c3ec975..1fcdaa7 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -4,16 +4,20 @@ import '@/assets/css/components/common/hide-scrollbar.scss' interface HideScrollbarProps extends React.DetailedHTMLProps, HTMLDivElement> { isPreventScroll?: boolean + isPreventVerticalScroll?: boolean + isPreventHorizontalScroll?: boolean + isShowVerticalScrollbar?: boolean + isShowHorizontalScrollbar?: boolean } export interface HideScrollbarElement { - scrollTo(x: number, y: number): void - scrollX(x: number): void - scrollY(y: number): void - scrollLeft(length: number): void - scrollRight(length: number): void - scrollUp(length: number): void - scrollDown(length: number): void + scrollTo(x: number, y: number, smooth?: boolean): void + scrollX(x: number, smooth?: boolean): void + scrollY(y: number, smooth?: boolean): void + scrollLeft(length: number, smooth?: boolean): void + scrollRight(length: number, smooth?: boolean): void + scrollUp(length: number, smooth?: boolean): void + scrollDown(length: number, smooth?: boolean): void getX(): number getY(): number addEventListenerWithType( @@ -40,19 +44,79 @@ export interface HideScrollbarElement { const HideScrollbar = forwardRef((props, ref) => { const rootRef = useRef(null) + const lastTouchPosition = useRef<{ x: number; y: number }>({ x: -1, y: -1 }) const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0) const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0) - const { isPreventScroll, ..._props } = props - const handleDefaultWheel = useCallback((event: WheelEvent) => { - if (!event.altKey && !event.ctrlKey) { - event.preventDefault() - } - }, []) + const { + isPreventScroll, + isPreventVerticalScroll, + isPreventHorizontalScroll, + isShowVerticalScrollbar, + isShowHorizontalScrollbar, + ..._props + } = props - const handleDefaultTouchmove = useCallback((event: TouchEvent) => { - event.preventDefault() - }, []) + const handleDefaultWheel = useCallback( + (event: WheelEvent) => { + if (!event.altKey && !event.ctrlKey) { + if (isPreventScroll) { + event.preventDefault() + return + } + if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) { + event.preventDefault() + return + } + if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) { + event.preventDefault() + return + } + } + }, + [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll] + ) + + const handleDefaultTouchStart = useCallback( + (event: TouchEvent) => { + if (event.touches.length !== 1 || isPreventScroll) { + lastTouchPosition.current = { x: -1, y: -1 } + return + } + + const { clientX, clientY } = event.touches[0] + lastTouchPosition.current = { x: clientX, y: clientY } + }, + [isPreventScroll] + ) + + const handleDefaultTouchmove = useCallback( + (event: TouchEvent) => { + event.preventDefault() + if (event.touches.length !== 1 || isPreventScroll) { + lastTouchPosition.current = { x: -1, y: -1 } + return + } + const { clientX, clientY } = event.touches[0] + + if (!isPreventVerticalScroll) { + rootRef.current?.scrollTo({ + top: rootRef.current?.scrollTop + (lastTouchPosition.current.y - clientY), + behavior: 'instant' + }) + } + + if (!isPreventHorizontalScroll) { + rootRef.current?.scrollTo({ + left: rootRef.current?.scrollLeft + (lastTouchPosition.current.x - clientX), + behavior: 'instant' + }) + } + + lastTouchPosition.current = { x: clientX, y: clientY } + }, + [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll] + ) const handleDefaultClickMiddleMouseButton = useCallback((event: MouseEvent) => { if (event.button === 1) { @@ -60,70 +124,88 @@ const HideScrollbar = forwardRef((prop } }, []) - const handleDefaultKeyDown = (event: KeyboardEvent) => { - if ( - [ - 'ArrowUp', - 'ArrowDown', - 'ArrowLeft', - 'ArrowRight', - ' ', - '', - 'PageUp', - 'PageDown', - 'Home', - 'End' - ].find((value) => value === event.key) - ) { - event.preventDefault() - } - } + const handleDefaultKeyDown = useCallback( + (event: KeyboardEvent) => { + if ( + isPreventScroll && + [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight', + ' ', + '', + 'PageUp', + 'PageDown', + 'Home', + 'End' + ].find((value) => value === event.key) + ) { + event.preventDefault() + } + if ( + isPreventVerticalScroll && + ['ArrowUp', 'ArrowDown', ' ', '', 'PageUp', 'PageDown', 'Home', 'End'].find( + (value) => value === event.key + ) + ) { + event.preventDefault() + } + if ( + isPreventHorizontalScroll && + ['ArrowLeft', 'ArrowRight'].find((value) => value === event.key) + ) { + event.preventDefault() + } + }, + [isPreventScroll, isPreventHorizontalScroll, isPreventVerticalScroll] + ) useImperativeHandle( ref, () => { return { - scrollTo(x, y) { + scrollTo(x, y, smooth?: boolean) { rootRef.current?.scrollTo({ left: x, top: y, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollX(x) { + scrollX(x, smooth?: boolean) { rootRef.current?.scrollTo({ left: x, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollY(y) { + scrollY(y, smooth?: boolean) { rootRef.current?.scrollTo({ top: y, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollLeft(length) { + scrollLeft(length, smooth?: boolean) { rootRef.current?.scrollTo({ left: rootRef.current?.scrollLeft - length, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollRight(length) { + scrollRight(length, smooth?: boolean) { rootRef.current?.scrollTo({ left: rootRef.current?.scrollLeft + length, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollUp(length) { + scrollUp(length, smooth?: boolean) { rootRef.current?.scrollTo({ top: rootRef.current?.scrollTop - length, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, - scrollDown(length) { + scrollDown(length, smooth?: boolean) { rootRef.current?.scrollTo({ top: rootRef.current?.scrollTop + length, - behavior: 'smooth' + behavior: smooth === false ? 'instant' : 'smooth' }) }, getX() { @@ -185,8 +267,11 @@ const HideScrollbar = forwardRef((prop }, 1000) window.addEventListener('resize', windowResizeListener()) - if (isPreventScroll) { + if (isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll) { rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false }) + rootRef.current?.addEventListener('touchstart', handleDefaultTouchStart, { + passive: false + }) rootRef.current?.addEventListener('touchmove', handleDefaultTouchmove, { passive: false }) @@ -194,6 +279,7 @@ const HideScrollbar = forwardRef((prop rootRef.current?.addEventListener('keydown', handleDefaultKeyDown) } else { rootRef.current?.removeEventListener('wheel', handleDefaultWheel) + rootRef.current?.removeEventListener('touchstart', handleDefaultTouchStart) rootRef.current?.removeEventListener('touchmove', handleDefaultTouchmove) rootRef.current?.removeEventListener('mousedown', handleDefaultClickMiddleMouseButton) rootRef.current?.removeEventListener('keydown', handleDefaultKeyDown) @@ -204,9 +290,13 @@ const HideScrollbar = forwardRef((prop } }, [ handleDefaultClickMiddleMouseButton, + handleDefaultKeyDown, + handleDefaultTouchStart, handleDefaultTouchmove, handleDefaultWheel, - isPreventScroll + isPreventHorizontalScroll, + isPreventScroll, + isPreventVerticalScroll ]) return ( diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx index cc26b1a..04edc5d 100644 --- a/src/components/home/index.tsx +++ b/src/components/home/index.tsx @@ -61,7 +61,7 @@ const Home: React.FC = () => { } const handleScrollDown = () => { - if (currentContent >= content.length) { + if (currentContent >= content.length - 1) { return } handleScrollToContent(currentContent + 1)() @@ -72,7 +72,7 @@ const Home: React.FC = () => { } const handleWheel = (event: React.WheelEvent) => { - if (event.altKey || event.ctrlKey) { + if (event.altKey || event.ctrlKey || event.shiftKey) { return } @@ -124,7 +124,6 @@ const Home: React.FC = () => { if (event.key === 'ArrowDown') { handleScrollDown() } - console.log(content.length) } const content = [ diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 1cf80b0..27a8284 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -43,7 +43,7 @@ const MainFramework: React.FC = () => { return ( <> - +