From 23027deb17064bef3687f4f04e1e8bbd4a1e865f Mon Sep 17 00:00:00 2001 From: Kristina Date: Thu, 17 Oct 2024 14:03:09 +0400 Subject: [PATCH] Fix reverse scroll bar scrolling with bar pull (#6968) Signed-off-by: Kristina Fefelova --- packages/ui/src/components/Scroller.svelte | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index a19a6cee4a..8b9548a68d 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -194,8 +194,13 @@ const topBar = Y - rectScroll.y - shiftTop - 2 const heightScroll = rectScroll.height - 4 - divBar.clientHeight - shiftTop - shiftBottom 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 if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) { @@ -513,7 +518,11 @@ divBar.style.top = `${topBar}px` const heightScroll = rectScroll.height - 4 - barHeight - shiftTop - shiftBottom 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 @@
{ onScrollStart(ev, 'vertical') @@ -895,6 +905,11 @@ max-height: calc(100% - 12px); transform: scaleX(0.5); + &.reverse { + top: auto; + bottom: 2px; + } + &:hover, &.hovered { transform: scaleX(1);