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

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

@@ -52,13 +52,13 @@ export interface HideScrollbarElement {
const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
(
{
isPreventScroll,
isPreventVerticalScroll,
isPreventHorizontalScroll,
isShowVerticalScrollbar,
isHiddenVerticalScrollbarWhenFull,
isShowHorizontalScrollbar,
isHiddenHorizontalScrollbarWhenFull,
isPreventScroll = false,
isPreventVerticalScroll = false,
isPreventHorizontalScroll = false,
isShowVerticalScrollbar = true,
isHiddenVerticalScrollbarWhenFull = true,
isShowHorizontalScrollbar = true,
isHiddenHorizontalScrollbarWhenFull = true,
minWidth,
minHeight,
scrollbarWidth,
@@ -536,20 +536,21 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
{children}
</div>
</div>
{isShowVerticalScrollbar &&
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
<div
hidden={
!isShowVerticalScrollbar ||
((isHiddenVerticalScrollbarWhenFull ?? true) &&
verticalScrollbarLength >= 100)
}
className={`scrollbar vertical-scrollbar${
verticalScrollbarAutoHide ? ' hide' : ''
}`}
style={{
height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
height: maskRef.current
? maskRef.current?.clientHeight - 1
: undefined,
top: maskRef.current?.clientTop,
left: maskRef.current
? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
? maskRef.current?.clientLeft +
maskRef.current?.clientWidth -
1
: undefined
}}
>
@@ -575,20 +576,23 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
/>
</div>
</div>
)}
{isShowHorizontalScrollbar &&
(!isHiddenHorizontalScrollbarWhenFull ||
horizontalScrollbarLength < 100) && (
<div
hidden={
!isShowHorizontalScrollbar ||
((isHiddenHorizontalScrollbarWhenFull ?? true) &&
horizontalScrollbarLength >= 100)
}
className={`scrollbar horizontal-scrollbar${
horizontalScrollbarAutoHide ? ' hide' : ''
}`}
style={{
width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
width: maskRef.current
? maskRef.current?.clientWidth - 1
: undefined,
left: maskRef.current?.clientLeft,
top: maskRef.current
? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
? maskRef.current?.clientTop +
maskRef.current?.clientHeight -
1
: undefined
}}
>
@@ -614,6 +618,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
/>
</div>
</div>
)}
</div>
</>
)