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

v1.0-230926 #27

Merged
FatttSnake merged 81 commits from dev into master 2023-09-26 11:06:08 +08:00
Conversation 0 Commits 81 Files Changed 52 +85 -6
3 changed files with 85 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 80045f90da - Show all commits

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

@@ -24,6 +24,7 @@
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
opacity: .5; opacity: .5;
touch-action: none;
.box { .box {
position: relative; position: relative;

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

@@ -133,16 +133,19 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
const rootRef = useRef<HTMLDivElement>(null) const rootRef = useRef<HTMLDivElement>(null)
const contentRef = useRef<HTMLDivElement>(null) const contentRef = useRef<HTMLDivElement>(null)
const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined) const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
const lastClickPositionRef = useRef({ x: -1, y: -1 }) const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
const lastTouchPositionRef = useRef({ x: -1, y: -1 }) const lastTouchPositionRef = useRef({ x: -1, y: -1 })
const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0) const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100) const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0) const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false) const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0) const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100) const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0) const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false) const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
const { const {
isPreventScroll, isPreventScroll,
@@ -244,7 +247,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
return (event: React.MouseEvent) => { return (event: React.MouseEvent) => {
switch (eventFlag) { switch (eventFlag) {
case 'down': case 'down':
lastClickPositionRef.current = { x: event.clientX, y: event.clientY } lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY }
switch (scrollbarFlag) { switch (scrollbarFlag) {
case 'vertical': case 'vertical':
setVerticalScrollbarOnClick(true) setVerticalScrollbarOnClick(true)
@@ -264,7 +267,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
top: top:
rootRef.current?.scrollTop + rootRef.current?.scrollTop +
((event.clientY - lastClickPositionRef.current.y) / ((event.clientY - lastScrollbarClickPositionRef.current.y) /
(rootRef.current?.clientHeight ?? 1)) * (rootRef.current?.clientHeight ?? 1)) *
(contentRef.current?.clientHeight ?? 0), (contentRef.current?.clientHeight ?? 0),
behavior: 'instant' behavior: 'instant'
@@ -274,13 +277,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
left: left:
rootRef.current?.scrollLeft + rootRef.current?.scrollLeft +
((event.clientX - lastClickPositionRef.current.x) / ((event.clientX - lastScrollbarClickPositionRef.current.x) /
(rootRef.current?.clientWidth ?? 1)) * (rootRef.current?.clientWidth ?? 1)) *
(contentRef.current?.clientWidth ?? 0), (contentRef.current?.clientWidth ?? 0),
behavior: 'instant' behavior: 'instant'
}) })
} }
lastClickPositionRef.current = { lastScrollbarClickPositionRef.current = {
x: event.clientX, x: event.clientX,
y: event.clientY y: event.clientY
} }
@@ -288,6 +291,65 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
} }
} }
const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
return (event: React.TouchEvent) => {
switch (eventFlag) {
case 'start':
if (event.touches.length !== 1) {
return
}
lastScrollbarTouchPositionRef.current = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
}
switch (scrollbarFlag) {
case 'vertical':
setVerticalScrollbarOnTouch(true)
break
case 'horizontal':
setHorizontalScrollbarOnTouch(true)
break
}
break
case 'end':
case 'cancel':
setVerticalScrollbarOnTouch(false)
setHorizontalScrollbarOnTouch(false)
break
case 'move':
if (event.touches.length !== 1) {
return
}
if (verticalScrollbarOnTouch) {
rootRef.current?.scrollTo({
top:
rootRef.current?.scrollTop +
((event.touches[0].clientY -
lastScrollbarClickPositionRef.current.y) /
(rootRef.current?.clientHeight ?? 1)) *
(contentRef.current?.clientHeight ?? 0),
behavior: 'instant'
})
}
if (horizontalScrollbarOnTouch) {
rootRef.current?.scrollTo({
left:
rootRef.current?.scrollLeft +
((event.touches[0].clientX -
lastScrollbarClickPositionRef.current.x) /
(rootRef.current?.clientWidth ?? 1)) *
(contentRef.current?.clientWidth ?? 0),
behavior: 'instant'
})
}
lastScrollbarClickPositionRef.current = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
}
}
}
}
const handleDefaultScroll = () => { const handleDefaultScroll = () => {
setVerticalScrollbarPosition( setVerticalScrollbarPosition(
((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100 ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
@@ -358,10 +420,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
onMouseMove={ onMouseMove={
!isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
} }
onTouchMove={
!isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
}
onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined} onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined}
onMouseLeave={ onMouseLeave={
!isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
} }
onTouchCancel={
!isPreventScroll ? handleScrollbarTouchEvent('cancel', 'all') : undefined
}
> >
<div <div
ref={rootRef} ref={rootRef}
@@ -399,6 +468,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
? handleScrollbarMouseEvent('down', 'vertical') ? handleScrollbarMouseEvent('down', 'vertical')
: undefined : undefined
} }
onTouchStart={
!isPreventScroll && !isPreventVerticalScroll
? handleScrollbarTouchEvent('start', 'vertical')
: undefined
}
/> />
</div> </div>
</div> </div>
@@ -420,6 +494,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
? handleScrollbarMouseEvent('down', 'horizontal') ? handleScrollbarMouseEvent('down', 'horizontal')
: undefined : undefined
} }
onTouchStart={
!isPreventScroll && !isPreventHorizontalScroll
? handleScrollbarTouchEvent('start', 'horizontal')
: undefined
}
/> />
</div> </div>
</div> </div>

1
src/pages/MainFramework.tsx
View File

@@ -65,7 +65,6 @@ const MainFramework: React.FC = () => {
ref={hideScrollbarRef} ref={hideScrollbarRef}
isPreventVerticalScroll={preventScroll} isPreventVerticalScroll={preventScroll}
isShowHorizontalScrollbar={true} isShowHorizontalScrollbar={true}
isShowVerticalScrollbar={true}
> >
<div className={'body'}> <div className={'body'}>
<header className={'nav' + (navbarHidden ? ' hide' : '')}> <header className={'nav' + (navbarHidden ? ' hide' : '')}>