FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Add prevent scroll control to HideScrollbar

Browse Source
This commit is contained in:
Fat Snake
2023-09-11 17:49:08 +08:00
parent 7b34de52da
commit 7d7450ddd9
5 changed files with 92 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FitCenter.tsx
View File

@@ -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>

3
src/components/FitFullScreen.tsx
View File

@@ -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
}

60
src/components/HideScrollbar.tsx
View File

@@ -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>

37
src/pages/MainFramework.tsx
View File

@@ -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
}}
>

5
vite.config.ts
View File

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