544 lines
22 KiB
TypeScript
544 lines
22 KiB
TypeScript
import React from 'react'
|
|
import '@/assets/css/components/common/hide-scrollbar.scss'
|
|
|
|
interface HideScrollbarProps
|
|
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
isPreventScroll?: boolean
|
|
isPreventVerticalScroll?: boolean
|
|
isPreventHorizontalScroll?: boolean
|
|
isShowVerticalScrollbar?: boolean
|
|
isHiddenVerticalScrollbarWhenFull?: boolean
|
|
isShowHorizontalScrollbar?: boolean
|
|
isHiddenHorizontalScrollbarWhenFull?: boolean
|
|
minWidth?: string | number
|
|
}
|
|
|
|
export interface HideScrollbarElement {
|
|
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<K extends keyof HTMLElementEventMap>(
|
|
type: K,
|
|
listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
|
|
options?: boolean | AddEventListenerOptions
|
|
): void
|
|
addEventListener(
|
|
type: string,
|
|
listener: EventListenerOrEventListenerObject,
|
|
options?: boolean | AddEventListenerOptions
|
|
): void
|
|
removeEventListenerWithType<K extends keyof HTMLElementEventMap>(
|
|
type: K,
|
|
listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
|
|
options?: boolean | EventListenerOptions
|
|
): void
|
|
removeEventListener(
|
|
type: string,
|
|
listener: EventListenerOrEventListenerObject,
|
|
options?: boolean | EventListenerOptions
|
|
): void
|
|
}
|
|
|
|
const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
|
|
useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
|
|
ref,
|
|
() => {
|
|
return {
|
|
scrollTo(x, y, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
left: x,
|
|
top: y,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollX(x, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
left: x,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollY(y, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
top: y,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollLeft(length, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
left: rootRef.current?.scrollLeft - length,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollRight(length, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
left: rootRef.current?.scrollLeft + length,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollUp(length, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
top: rootRef.current?.scrollTop - length,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
scrollDown(length, smooth?: boolean) {
|
|
rootRef.current?.scrollTo({
|
|
top: rootRef.current?.scrollTop + length,
|
|
behavior: smooth === false ? 'instant' : 'smooth'
|
|
})
|
|
},
|
|
getX() {
|
|
return rootRef.current?.scrollLeft ?? 0
|
|
},
|
|
getY() {
|
|
return rootRef.current?.scrollTop ?? 0
|
|
},
|
|
addEventListenerWithType<K extends keyof HTMLElementEventMap>(
|
|
type: K,
|
|
listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
|
|
options?: boolean | AddEventListenerOptions
|
|
): void {
|
|
rootRef.current?.addEventListener<K>(type, listener, options)
|
|
},
|
|
addEventListener(
|
|
type: string,
|
|
listener: EventListenerOrEventListenerObject,
|
|
options?: boolean | AddEventListenerOptions
|
|
): void {
|
|
rootRef.current?.addEventListener(type, listener, options)
|
|
},
|
|
removeEventListenerWithType<K extends keyof HTMLElementEventMap>(
|
|
type: K,
|
|
listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
|
|
options?: boolean | EventListenerOptions
|
|
): void {
|
|
rootRef.current?.removeEventListener<K>(type, listener, options)
|
|
},
|
|
removeEventListener(
|
|
type: string,
|
|
listener: EventListenerOrEventListenerObject,
|
|
options?: boolean | EventListenerOptions
|
|
): void {
|
|
rootRef.current?.removeEventListener(type, listener, options)
|
|
}
|
|
}
|
|
},
|
|
[]
|
|
)
|
|
|
|
const maskRef = useRef<HTMLDivElement>(null)
|
|
const rootRef = useRef<HTMLDivElement>(null)
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
|
|
const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
|
|
const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
|
|
const lastTouchPositionRef = useRef({ x: -1, y: -1 })
|
|
const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
|
|
const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
|
|
const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
|
|
const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
|
|
const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
|
|
const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
|
|
const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
|
|
const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
|
|
const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
|
|
const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
|
|
|
|
const {
|
|
isPreventScroll,
|
|
isPreventVerticalScroll,
|
|
isPreventHorizontalScroll,
|
|
isShowVerticalScrollbar,
|
|
isHiddenVerticalScrollbarWhenFull,
|
|
isShowHorizontalScrollbar,
|
|
isHiddenHorizontalScrollbarWhenFull,
|
|
minWidth,
|
|
..._props
|
|
} = props
|
|
|
|
const isPreventAnyScroll =
|
|
isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
|
|
|
|
const handleDefaultTouchStart = useCallback(
|
|
(event: React.TouchEvent) => {
|
|
if (event.touches.length !== 1 || isPreventScroll) {
|
|
lastTouchPositionRef.current = { x: -1, y: -1 }
|
|
return
|
|
}
|
|
|
|
const { clientX, clientY } = event.touches[0]
|
|
lastTouchPositionRef.current = { x: clientX, y: clientY }
|
|
},
|
|
[isPreventScroll]
|
|
)
|
|
|
|
const handleDefaultTouchmove = useCallback(
|
|
(event: React.TouchEvent) => {
|
|
if (event.touches.length !== 1 || isPreventScroll) {
|
|
lastTouchPositionRef.current = { x: -1, y: -1 }
|
|
return
|
|
}
|
|
const { clientX, clientY } = event.touches[0]
|
|
|
|
if (!isPreventVerticalScroll) {
|
|
rootRef.current?.scrollTo({
|
|
top: rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
|
|
if (!isPreventHorizontalScroll) {
|
|
rootRef.current?.scrollTo({
|
|
left: rootRef.current?.scrollLeft + (lastTouchPositionRef.current.x - clientX),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
|
|
lastTouchPositionRef.current = { x: clientX, y: clientY }
|
|
},
|
|
[isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
|
|
)
|
|
|
|
const handleDefaultMouseDown = (event: React.MouseEvent) => {
|
|
if (isPreventAnyScroll)
|
|
if (event.button === 1) {
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
|
|
const handleDefaultKeyDown = useCallback(
|
|
(event: React.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()
|
|
}
|
|
},
|
|
[isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
|
|
)
|
|
|
|
const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
|
|
return (event: React.MouseEvent) => {
|
|
switch (eventFlag) {
|
|
case 'down':
|
|
lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY }
|
|
switch (scrollbarFlag) {
|
|
case 'vertical':
|
|
setVerticalScrollbarOnClick(true)
|
|
break
|
|
case 'horizontal':
|
|
setHorizontalScrollbarOnClick(true)
|
|
break
|
|
}
|
|
break
|
|
case 'up':
|
|
case 'leave':
|
|
setVerticalScrollbarOnClick(false)
|
|
setHorizontalScrollbarOnClick(false)
|
|
break
|
|
case 'move':
|
|
if (verticalScrollbarOnClick) {
|
|
rootRef.current?.scrollTo({
|
|
top:
|
|
rootRef.current?.scrollTop +
|
|
((event.clientY - lastScrollbarClickPositionRef.current.y) /
|
|
(rootRef.current?.clientHeight ?? 1)) *
|
|
(contentRef.current?.clientHeight ?? 0),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
if (horizontalScrollbarOnClick) {
|
|
rootRef.current?.scrollTo({
|
|
left:
|
|
rootRef.current?.scrollLeft +
|
|
((event.clientX - lastScrollbarClickPositionRef.current.x) /
|
|
(rootRef.current?.clientWidth ?? 1)) *
|
|
(contentRef.current?.clientWidth ?? 0),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
lastScrollbarClickPositionRef.current = {
|
|
x: event.clientX,
|
|
y: event.clientY
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
|
|
return (event: React.TouchEvent) => {
|
|
switch (eventFlag) {
|
|
case 'start':
|
|
if (event.touches.length !== 1) {
|
|
return
|
|
}
|
|
lastScrollbarTouchPositionRef.current = {
|
|
x: event.touches[0].clientX,
|
|
y: event.touches[0].clientY
|
|
}
|
|
switch (scrollbarFlag) {
|
|
case 'vertical':
|
|
setVerticalScrollbarOnTouch(true)
|
|
break
|
|
case 'horizontal':
|
|
setHorizontalScrollbarOnTouch(true)
|
|
break
|
|
}
|
|
break
|
|
case 'end':
|
|
case 'cancel':
|
|
setVerticalScrollbarOnTouch(false)
|
|
setHorizontalScrollbarOnTouch(false)
|
|
break
|
|
case 'move':
|
|
if (event.touches.length !== 1) {
|
|
return
|
|
}
|
|
if (verticalScrollbarOnTouch) {
|
|
rootRef.current?.scrollTo({
|
|
top:
|
|
rootRef.current?.scrollTop +
|
|
((event.touches[0].clientY -
|
|
lastScrollbarClickPositionRef.current.y) /
|
|
(rootRef.current?.clientHeight ?? 1)) *
|
|
(contentRef.current?.clientHeight ?? 0),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
if (horizontalScrollbarOnTouch) {
|
|
rootRef.current?.scrollTo({
|
|
left:
|
|
rootRef.current?.scrollLeft +
|
|
((event.touches[0].clientX -
|
|
lastScrollbarClickPositionRef.current.x) /
|
|
(rootRef.current?.clientWidth ?? 1)) *
|
|
(contentRef.current?.clientWidth ?? 0),
|
|
behavior: 'instant'
|
|
})
|
|
}
|
|
lastScrollbarClickPositionRef.current = {
|
|
x: event.touches[0].clientX,
|
|
y: event.touches[0].clientY
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleDefaultScroll = () => {
|
|
setVerticalScrollbarPosition(
|
|
((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
|
|
)
|
|
setHorizontalScrollbarPosition(
|
|
((rootRef.current?.scrollLeft ?? 0) / (contentRef.current?.clientWidth ?? 1)) * 100
|
|
)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const windowResizeListener = () => {
|
|
setVerticalScrollbarWidth(
|
|
(rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
|
|
)
|
|
setHorizontalScrollbarWidth(
|
|
(rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
|
|
)
|
|
|
|
rootRef.current &&
|
|
setVerticalScrollbarLength(
|
|
(rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
|
|
)
|
|
|
|
rootRef.current &&
|
|
setHorizontalScrollbarLength(
|
|
(rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
|
|
)
|
|
|
|
return windowResizeListener
|
|
}
|
|
setTimeout(() => {
|
|
windowResizeListener()
|
|
}, 1000)
|
|
window.addEventListener('resize', windowResizeListener())
|
|
|
|
rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
|
|
if (isPreventAnyScroll) {
|
|
const handleDefaultWheel = (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
|
|
}
|
|
}
|
|
}
|
|
wheelListenerRef.current = handleDefaultWheel
|
|
rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
|
|
}
|
|
|
|
rootRef.current &&
|
|
setVerticalScrollbarLength(
|
|
(rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
|
|
)
|
|
|
|
rootRef.current &&
|
|
setHorizontalScrollbarLength(
|
|
(rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
|
|
)
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', windowResizeListener)
|
|
}
|
|
}, [
|
|
horizontalScrollbarLength,
|
|
isPreventAnyScroll,
|
|
isPreventHorizontalScroll,
|
|
isPreventScroll,
|
|
isPreventVerticalScroll
|
|
])
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={'hide-scrollbar-mask'}
|
|
ref={maskRef}
|
|
onMouseMove={
|
|
!isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
|
|
}
|
|
onTouchMove={
|
|
!isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
|
|
}
|
|
onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
|
|
onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined}
|
|
onMouseLeave={
|
|
!isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
|
|
}
|
|
onTouchCancel={
|
|
!isPreventScroll ? handleScrollbarTouchEvent('cancel', 'all') : undefined
|
|
}
|
|
>
|
|
<div
|
|
ref={rootRef}
|
|
className={'hide-scrollbar-selection'}
|
|
tabIndex={0}
|
|
style={{
|
|
width: `calc(100vw + ${verticalScrollbarWidth}px)`,
|
|
height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
|
|
touchAction: isPreventAnyScroll ? 'none' : '',
|
|
msTouchAction: isPreventAnyScroll ? 'none' : ''
|
|
}}
|
|
{..._props}
|
|
onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
|
|
onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
|
|
onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
|
|
onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
|
|
onScroll={handleDefaultScroll}
|
|
>
|
|
<div className={'hide-scrollbar-content'} ref={contentRef} style={{ minWidth }}>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
<div
|
|
hidden={
|
|
!isShowVerticalScrollbar ||
|
|
((isHiddenVerticalScrollbarWhenFull ?? true) &&
|
|
verticalScrollbarLength === 100)
|
|
}
|
|
className={'scrollbar vertical-scrollbar'}
|
|
>
|
|
<div className={'box'}>
|
|
<div
|
|
className={'block'}
|
|
style={{
|
|
height: `${verticalScrollbarLength}%`,
|
|
top: `clamp(0px, ${verticalScrollbarPosition}%, ${
|
|
100 - verticalScrollbarLength
|
|
}%)`
|
|
}}
|
|
onMouseDown={
|
|
!isPreventScroll && !isPreventVerticalScroll
|
|
? handleScrollbarMouseEvent('down', 'vertical')
|
|
: undefined
|
|
}
|
|
onTouchStart={
|
|
!isPreventScroll && !isPreventVerticalScroll
|
|
? handleScrollbarTouchEvent('start', 'vertical')
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
hidden={
|
|
!isShowHorizontalScrollbar ||
|
|
((isHiddenHorizontalScrollbarWhenFull ?? true) &&
|
|
horizontalScrollbarLength === 100)
|
|
}
|
|
className={'scrollbar horizontal-scrollbar'}
|
|
>
|
|
<div className={'box'}>
|
|
<div
|
|
className={'block'}
|
|
style={{
|
|
width: `${horizontalScrollbarLength}%`,
|
|
left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
|
|
100 - horizontalScrollbarLength
|
|
}%)`
|
|
}}
|
|
onMouseDown={
|
|
!isPreventScroll && !isPreventHorizontalScroll
|
|
? handleScrollbarMouseEvent('down', 'horizontal')
|
|
: undefined
|
|
}
|
|
onTouchStart={
|
|
!isPreventScroll && !isPreventHorizontalScroll
|
|
? handleScrollbarTouchEvent('start', 'horizontal')
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default HideScrollbar
|