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

Optimize HideScrollbar and sidebar

Browse Source
This commit is contained in:
Fat Snake
2023-11-03 13:35:20 +08:00
parent 7d6cd3cb26
commit bc196d4ba9
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -411,30 +411,37 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
setRefreshTime(Date.now())
}
const reloadScrollbar = () => {
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
)
refreshLayout()
}
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
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
)
refreshLayout()
reloadScrollbar()
})
maskRef.current && resizeObserver.observe(maskRef.current)
contentRef.current && resizeObserver.observe(contentRef.current)
return () => {
maskRef.current && resizeObserver.unobserve(maskRef.current)
contentRef.current && resizeObserver.unobserve(contentRef.current)
}
}, [])