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

Optimize HideScrollbar

Browse Source
This commit is contained in:
Fat Snake
2023-10-13 11:14:24 +08:00
parent 1c05de7f20
commit a8129e8aff
2 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/components/common/hide-scrollbar.scss
View File

@@ -1,6 +1,7 @@
@use '@/assets/css/constants' as constants; @use '@/assets/css/constants' as constants;
.hide-scrollbar-mask { .hide-scrollbar-mask {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@@ -49,8 +50,9 @@
padding: 12px 4px; padding: 12px 4px;
width: 16px; width: 16px;
height: 100%; height: 100%;
right: 0; left: 100%;
top: 0; top: 0;
transform: translateX(-100%);
} }
.horizontal-scrollbar { .horizontal-scrollbar {
@@ -58,6 +60,7 @@
width: 100%; width: 100%;
height: 16px; height: 16px;
left: 0; left: 0;
bottom: 0; top: 100%;
transform: translateY(-100%);
} }
} }

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

@@ -459,8 +459,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
className={'hide-scrollbar-selection'} className={'hide-scrollbar-selection'}
tabIndex={0} tabIndex={0}
style={{ style={{
width: `calc(100vw + ${verticalScrollbarWidth}px)`, width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
height: `calc(100vh + ${horizontalScrollbarWidth}px)`, height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
touchAction: isPreventAnyScroll ? 'none' : '', touchAction: isPreventAnyScroll ? 'none' : '',
msTouchAction: isPreventAnyScroll ? 'none' : '' msTouchAction: isPreventAnyScroll ? 'none' : ''
}} }}
@@ -482,6 +482,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
verticalScrollbarLength === 100) verticalScrollbarLength === 100)
} }
className={'scrollbar vertical-scrollbar'} className={'scrollbar vertical-scrollbar'}
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'}> <div className={'box'}>
<div <div
@@ -512,6 +519,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
horizontalScrollbarLength === 100) horizontalScrollbarLength === 100)
} }
className={'scrollbar horizontal-scrollbar'} className={'scrollbar horizontal-scrollbar'}
style={{
width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
left: maskRef.current?.clientLeft,
top: maskRef.current
? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
: undefined
}}
> >
<div className={'box'}> <div className={'box'}>
<div <div