Add prevent scroll control to HideScrollbar

src/components/FitCenter.tsx

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

src/components/FitFullScreen.tsx

@@ -1,6 +1,7 @@
+import React from 'react'
 import '@/assets/css/fit-fullscreen.scss'
 
-interface FitFullscreenProps extends PropsWithChildren {
+interface FitFullscreenProps extends React.PropsWithChildren {
     zIndex?: number
     backgroundColor?: string
 }

src/components/HideScrollbar.tsx

@@ -1,5 +1,11 @@
+import React from 'react'
 import '@/assets/css/hide-scrollbar.scss'
 
+interface HideScrollbarProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    isPreventScroll?: boolean
+}
+
 export interface HideScrollbarElement {
     scrollTo(x: number, y: number): void
     scrollX(x: number): void
@@ -32,11 +38,46 @@ export interface HideScrollbarElement {
     ): void
 }
 
-const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props, ref) => {
+const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
     const rootRef = useRef<HTMLDivElement>(null)
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
 
+    const { isPreventScroll, ..._props } = props
+
+    const handleDefaultWheel = (event: WheelEvent) => {
+        event.preventDefault()
+    }
+
+    const handleDefaultTouchmove = (event: TouchEvent) => {
+        event.preventDefault()
+    }
+
+    const handleDefaultClickMiddleMouseButton = (event: MouseEvent) => {
+        if (event.button === 1) {
+            event.preventDefault()
+        }
+    }
+
+    const handleDefaultKeyDown = (event: KeyboardEvent) => {
+        if (
+            [
+                'ArrowUp',
+                'ArrowDown',
+                'ArrowLeft',
+                'ArrowRight',
+                ' ',
+                '',
+                'PageUp',
+                'PageDown',
+                'Home',
+                'End'
+            ].find((value) => value === event.key)
+        ) {
+            event.preventDefault()
+        }
+    }
+
     useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
         ref,
         () => {
@@ -143,11 +184,24 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
         }, 1000)
 
         window.addEventListener('resize', windowResizeListener())
+        if (isPreventScroll) {
+            rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
+            rootRef.current?.addEventListener('touchmove', handleDefaultTouchmove, {
+                passive: false
+            })
+            rootRef.current?.addEventListener('mousedown', handleDefaultClickMiddleMouseButton)
+            rootRef.current?.addEventListener('keydown', handleDefaultKeyDown)
+        } else {
+            rootRef.current?.removeEventListener('wheel', handleDefaultWheel)
+            rootRef.current?.removeEventListener('touchmove', handleDefaultTouchmove)
+            rootRef.current?.removeEventListener('mousedown', handleDefaultClickMiddleMouseButton)
+            rootRef.current?.removeEventListener('keydown', handleDefaultKeyDown)
+        }
 
         return () => {
             window.removeEventListener('resize', windowResizeListener)
         }
-    }, [])
+    }, [isPreventScroll])
 
     return (
         <>
@@ -155,10 +209,12 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
                 <div
                     ref={rootRef}
                     className={'hide-scrollbar-selection'}
+                    tabIndex={0}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px`
                     }}
+                    {..._props}
                 >
                     {props.children}
                 </div>

src/pages/MainFramework.tsx

@@ -9,30 +9,54 @@ export const MainFrameworkContext = createContext<{
         navbarHidden: boolean
         setNavbarHidden: (newValue: boolean) => void
     }
-    hideScrollbarRef: RefObject<HideScrollbarElement>
+    preventScrollState: {
+        preventScroll: boolean
+        setPreventScroll: (newValue: boolean) => void
+    }
+    hideScrollbarRef: React.RefObject<HideScrollbarElement>
 }>({
     navbarHiddenState: {
         navbarHidden: false,
         setNavbarHidden: () => undefined
     },
-    hideScrollbarRef: createRef()
+    hideScrollbarRef: createRef(),
+    preventScrollState: {
+        preventScroll: false,
+        setPreventScroll: () => undefined
+    }
 })
 
 const MainFramework: React.FC = () => {
-    const [navbarHidden, setNavbarHidden] = useState(true)
-
-    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
     const pathname = useLocation().pathname
+
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
+
+    const [navbarHidden, setNavbarHidden] = useState(true)
+    const [preventScroll, setPreventScroll] = useState(false)
+
     useEffect(() => {
         setNavbarHidden(false)
     }, [pathname])
 
+    const handleOnWheel = useCallback((event: React.WheelEvent) => {
+        console.log(event)
+    }, [])
+
+    const handleOnScroll = useCallback((event: React.UIEvent) => {
+        console.log(event)
+    }, [])
+
     return (
         <>
-            <HideScrollbar ref={hideScrollbarRef}>
+            <HideScrollbar
+                ref={hideScrollbarRef}
+                onWheel={handleOnWheel}
+                onScroll={handleOnScroll}
+                isPreventScroll={preventScroll}
+            >
                 <div className={'body'}>
                     <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
@@ -61,6 +85,7 @@ const MainFramework: React.FC = () => {
                     <MainFrameworkContext.Provider
                         value={{
                             navbarHiddenState: { navbarHidden, setNavbarHidden },
+                            preventScrollState: { preventScroll, setPreventScroll },
                             hideScrollbarRef
                         }}
                     >

vite.config.ts

@@ -35,11 +35,6 @@ export default defineConfig({
                     from: 'react-router',
                     imports: ['RouteObject'],
                     type: true
-                },
-                {
-                    from: 'react',
-                    imports: ['PropsWithChildren', 'RefObject'],
-                    type: true
                 }
             ],