hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 11:31:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

UBER-1159: fixed horizontal scrolling in Scroller (#3945)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-11-07 07:45:16 +03:00 committed by GitHub
parent cbd7e82e8f
commit b77ad4dc4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/ui/src/components/Scroller.svelte
View File

@ -162,7 +162,13 @@
const onScroll = (event: MouseEvent): void => { const onScroll = (event: MouseEvent): void => {
scrolling = false scrolling = false
if (isScrolling && divBar && divScroll) { if (
(divBar == null && isScrolling === 'vertical') ||
(divBarH == null && isScrolling === 'horizontal') ||
divScroll == null
) {
return
}
const rectScroll = divScroll.getBoundingClientRect() const rectScroll = divScroll.getBoundingClientRect()
if (isScrolling === 'vertical') { if (isScrolling === 'vertical') {
let Y = event.clientY - dXY let Y = event.clientY - dXY
@ -189,34 +195,23 @@
divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar
} }
} }
} const onScrollEnd = (): void => {
const onScrollEnd = (event: MouseEvent): void => {
const el: HTMLElement = event.currentTarget as HTMLElement
if (el && isScrolling) {
document.removeEventListener('mousemove', onScroll) document.removeEventListener('mousemove', onScroll)
// document.body.style.pointerEvents = 'all'
document.body.style.userSelect = 'auto' document.body.style.userSelect = 'auto'
document.body.style.webkitUserSelect = 'auto' document.body.style.webkitUserSelect = 'auto'
}
document.removeEventListener('mouseup', onScrollEnd) document.removeEventListener('mouseup', onScrollEnd)
isScrolling = false isScrolling = false
} }
const onScrollStart = (event: MouseEvent, direction: 'vertical' | 'horizontal'): void => { const onScrollStart = (event: MouseEvent, direction: 'vertical' | 'horizontal'): void => {
if (divScroll == null) return
scrolling = false scrolling = false
const el: HTMLElement = event.currentTarget as HTMLElement dXY = direction === 'vertical' ? event.offsetY : event.offsetX
if (el && divScroll) {
dXY =
direction === 'vertical'
? event.clientY - el.getBoundingClientRect().y
: event.clientX - el.getBoundingClientRect().x
document.addEventListener('mouseup', onScrollEnd) document.addEventListener('mouseup', onScrollEnd)
document.addEventListener('mousemove', onScroll) document.addEventListener('mousemove', onScroll)
// document.body.style.pointerEvents = 'none'
document.body.style.userSelect = 'none' document.body.style.userSelect = 'none'
document.body.style.webkitUserSelect = 'none' document.body.style.webkitUserSelect = 'none'
isScrolling = direction isScrolling = direction
} }
}
const renderFade = () => { const renderFade = () => {
if (divScroll && !noFade) { if (divScroll && !noFade) {
@ -456,7 +451,14 @@
ev: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }, ev: MouseEvent & { currentTarget: EventTarget & HTMLDivElement },
horizontal: boolean = false horizontal: boolean = false
) => { ) => {
if (!isScrolling && divBar && divScroll) { if (
(divBar == null && !horizontal) ||
(divBarH == null && horizontal) ||
divScroll == null ||
isScrolling !== false
) {
return
}
const rectScroll = divScroll.getBoundingClientRect() const rectScroll = divScroll.getBoundingClientRect()
if (horizontal) { if (horizontal) {
const x = ev.offsetX const x = ev.offsetX
@ -488,7 +490,6 @@
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
} }
} }
}
$: topButton = $: topButton =
(orientir === 'vertical' && (mask === 'top' || mask === 'both')) || (orientir === 'vertical' && (mask === 'top' || mask === 'both')) ||