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

Add scrollbar to HideScrollbar (in development)

Browse Source
This commit is contained in:
Fat Snake
2023-09-22 18:19:40 +08:00
parent f744748a85
commit 420cb1378c
3 changed files with 104 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,6 +47,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
const lastTouchPosition = useRef<{ x: number; y: number }>({ x: -1, y: -1 })
const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
const {
isPreventScroll,
@@ -308,12 +310,31 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
tabIndex={0}
style={{
width: `calc(100vw + ${verticalScrollbarWidth}px)`,
height: `calc(100vh + ${horizontalScrollbarWidth}px`
height: `calc(100vh + ${horizontalScrollbarWidth}px)`
}}
{..._props}
>
{props.children}
</div>
<div hidden={!isShowVerticalScrollbar} className={'scrollbar vertical-scrollbar'}>
<div className={'box'}>
<div
className={'block'}
style={{ height: `${verticalScrollbarLength}%` }}
/>
</div>
</div>
<div
hidden={!isShowHorizontalScrollbar}
className={'scrollbar horizontal-scrollbar'}
>
<div className={'box'}>
<div
className={'block'}
style={{ width: `${horizontalScrollbarLength}%` }}
/>
</div>
</div>
</div>
</>
)