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

Upgrade HideScrollbar

Browse Source
This commit is contained in:
Fat Snake
2024-01-18 14:53:28 +08:00
parent c460e2c4cf
commit 9bcf559718
1 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/common/HideScrollbar.tsx
View File

@@ -52,13 +52,13 @@ export interface HideScrollbarElement {
const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>( const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
( (
{ {
isPreventScroll, isPreventScroll = false,
isPreventVerticalScroll, isPreventVerticalScroll = false,
isPreventHorizontalScroll, isPreventHorizontalScroll = false,
isShowVerticalScrollbar, isShowVerticalScrollbar = true,
isHiddenVerticalScrollbarWhenFull, isHiddenVerticalScrollbarWhenFull = true,
isShowHorizontalScrollbar, isShowHorizontalScrollbar = true,
isHiddenHorizontalScrollbarWhenFull, isHiddenHorizontalScrollbarWhenFull = true,
minWidth, minWidth,
minHeight, minHeight,
scrollbarWidth, scrollbarWidth,
@@ -536,84 +536,89 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
{children} {children}
</div> </div>
</div> </div>
<div {isShowVerticalScrollbar &&
hidden={ (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
!isShowVerticalScrollbar ||
((isHiddenVerticalScrollbarWhenFull ?? true) &&
verticalScrollbarLength >= 100)
}
className={`scrollbar vertical-scrollbar${
verticalScrollbarAutoHide ? ' hide' : ''
}`}
style={{
height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
top: maskRef.current?.clientTop,
left: maskRef.current
? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
: undefined
}}
>
<div className={'box'} style={{ width: scrollbarWidth }}>
<div <div
className={'block'} className={`scrollbar vertical-scrollbar${
verticalScrollbarAutoHide ? ' hide' : ''
}`}
style={{ style={{
height: `${verticalScrollbarLength}%`, height: maskRef.current
top: `clamp(0px, ${verticalScrollbarPosition}%, ${ ? maskRef.current?.clientHeight - 1
100 - verticalScrollbarLength : undefined,
}%)` top: maskRef.current?.clientTop,
left: maskRef.current
? maskRef.current?.clientLeft +
maskRef.current?.clientWidth -
1
: undefined
}} }}
onMouseDown={ >
!isPreventScroll && !isPreventVerticalScroll <div className={'box'} style={{ width: scrollbarWidth }}>
? handleScrollbarMouseEvent('down', 'vertical') <div
: undefined className={'block'}
} style={{
onTouchStart={ height: `${verticalScrollbarLength}%`,
!isPreventScroll && !isPreventVerticalScroll top: `clamp(0px, ${verticalScrollbarPosition}%, ${
? handleScrollbarTouchEvent('start', 'vertical') 100 - verticalScrollbarLength
: undefined }%)`
} }}
/> onMouseDown={
</div> !isPreventScroll && !isPreventVerticalScroll
</div> ? handleScrollbarMouseEvent('down', 'vertical')
<div : undefined
hidden={ }
!isShowHorizontalScrollbar || onTouchStart={
((isHiddenHorizontalScrollbarWhenFull ?? true) && !isPreventScroll && !isPreventVerticalScroll
horizontalScrollbarLength >= 100) ? handleScrollbarTouchEvent('start', 'vertical')
} : undefined
className={`scrollbar horizontal-scrollbar${ }
horizontalScrollbarAutoHide ? ' hide' : '' />
}`} </div>
style={{ </div>
width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined, )}
left: maskRef.current?.clientLeft, {isShowHorizontalScrollbar &&
top: maskRef.current (!isHiddenHorizontalScrollbarWhenFull ||
? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1 horizontalScrollbarLength < 100) && (
: undefined
}}
>
<div className={'box'} style={{ height: scrollbarWidth }}>
<div <div
className={'block'} className={`scrollbar horizontal-scrollbar${
horizontalScrollbarAutoHide ? ' hide' : ''
}`}
style={{ style={{
width: `${horizontalScrollbarLength}%`, width: maskRef.current
left: `clamp(0px, ${horizontalScrollbarPosition}%, ${ ? maskRef.current?.clientWidth - 1
100 - horizontalScrollbarLength : undefined,
}%)` left: maskRef.current?.clientLeft,
top: maskRef.current
? maskRef.current?.clientTop +
maskRef.current?.clientHeight -
1
: undefined
}} }}
onMouseDown={ >
!isPreventScroll && !isPreventHorizontalScroll <div className={'box'} style={{ height: scrollbarWidth }}>
? handleScrollbarMouseEvent('down', 'horizontal') <div
: undefined className={'block'}
} style={{
onTouchStart={ width: `${horizontalScrollbarLength}%`,
!isPreventScroll && !isPreventHorizontalScroll left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
? handleScrollbarTouchEvent('start', 'horizontal') 100 - horizontalScrollbarLength
: undefined }%)`
} }}
/> onMouseDown={
</div> !isPreventScroll && !isPreventHorizontalScroll
</div> ? handleScrollbarMouseEvent('down', 'horizontal')
: undefined
}
onTouchStart={
!isPreventScroll && !isPreventHorizontalScroll
? handleScrollbarTouchEvent('start', 'horizontal')
: undefined
}
/>
</div>
</div>
)}
</div> </div>
</> </>
) )