hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-01-03 08:57:14 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix reverse scroll bar scrolling with bar pull (#6968)
Some checks are pending
CI / build (push) Waiting to run
Details
CI / svelte-check (push) Blocked by required conditions
Details
CI / formatting (push) Blocked by required conditions
Details
CI / test (push) Blocked by required conditions
Details
CI / uitest (push) Waiting to run
Details
CI / uitest-pg (push) Waiting to run
Details
CI / uitest-qms (push) Waiting to run
Details
CI / docker-build (push) Blocked by required conditions
Details
CI / dist-build (push) Blocked by required conditions
Details

Browse Source 
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina 2024-10-17 14:03:09 +04:00 committed by GitHub
parent 7d91ffee77
commit 23027deb17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -194,8 +194,13 @@
const topBar = Y - rectScroll.y - shiftTop - 2 const topBar = Y - rectScroll.y - shiftTop - 2
const heightScroll = rectScroll.height - 4 - divBar.clientHeight - shiftTop - shiftBottom const heightScroll = rectScroll.height - 4 - divBar.clientHeight - shiftTop - shiftBottom
const procBar = topBar / heightScroll const procBar = topBar / heightScroll
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
} else { if (scrollDirection === 'vertical-reverse') {
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * (procBar - 1)
} else {
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
}
} else if (isScrolling === 'horizontal') {
let X = event.clientX - dXY let X = event.clientX - dXY
if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft
if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) { if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) {
@ -513,7 +518,11 @@
divBar.style.top = `${topBar}px` divBar.style.top = `${topBar}px`
const heightScroll = rectScroll.height - 4 - barHeight - shiftTop - shiftBottom const heightScroll = rectScroll.height - 4 - barHeight - shiftTop - shiftBottom
const procBar = (topBar - rectScroll.top - shiftTop - 2) / heightScroll const procBar = (topBar - rectScroll.top - shiftTop - 2) / heightScroll
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar if (scrollDirection === 'vertical-reverse') {
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * (procBar - 1)
} else {
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
}
} }
} }
@ -655,6 +664,7 @@
<div <div
class="bar" class="bar"
class:hovered={isScrolling === 'vertical'} class:hovered={isScrolling === 'vertical'}
class:reverse={scrollDirection === 'vertical-reverse'}
bind:this={divBar} bind:this={divBar}
on:mousedown|stopPropagation={(ev) => { on:mousedown|stopPropagation={(ev) => {
onScrollStart(ev, 'vertical') onScrollStart(ev, 'vertical')
@ -895,6 +905,11 @@
max-height: calc(100% - 12px); max-height: calc(100% - 12px);
transform: scaleX(0.5); transform: scaleX(0.5);
&.reverse {
top: auto;
bottom: 2px;
}
&:hover, &:hover,
&.hovered { &.hovered {
transform: scaleX(1); transform: scaleX(1);