From 7fe1c094ec0266cb01395bf0c31e60d296a1f580 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 25 Sep 2024 15:16:54 -0400 Subject: [PATCH] fix(segment-view): always check the scrollLeft against the initial to get scrollDistance --- core/src/components/segment-view/segment-view.tsx | 6 +++--- core/src/components/segment/segment.tsx | 5 +---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx index abc932b8ce..16c6687804 100644 --- a/core/src/components/segment-view/segment-view.tsx +++ b/core/src/components/segment-view/segment-view.tsx @@ -41,12 +41,12 @@ export class SegmentView implements ComponentInterface { this.initialScrollLeft = scrollLeft; } + // Determine the scroll direction based on the previous scroll position const scrollDirection = scrollLeft > previousScrollLeft ? 'right' : 'left'; this.previousScrollLeft = scrollLeft; - // If the scroll direction is left then we need to calculate where we started and subtract - // the current scrollLeft to get the distance scrolled. Otherwise, we use the scrollLeft. - const scrollDistance = scrollDirection === 'left' ? initialScrollLeft! - scrollLeft : scrollLeft; + // Calculate the distance scrolled based on the initial scroll position + const scrollDistance = scrollLeft - initialScrollLeft!; // Emit the scroll direction and distance this.ionSegmentViewScroll.emit({ diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index c184217b9c..36959e1442 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -369,15 +369,12 @@ export class Segment implements ComponentInterface { const segmentRect = segmentEl.getBoundingClientRect(); const buttonRect = current.getBoundingClientRect(); - // Calculate the potential transform value based on scroll direction - const transformValue = scrollDirection === 'left' ? -scrollDistance : scrollDistance; - // Calculate the max and min allowed transformations based on the scroll direction const maxTransform = scrollDirection === 'left' ? 0 : segmentRect.width - buttonRect.width; const minTransform = scrollDirection === 'left' ? -(segmentRect.width - buttonRect.width) : 0; // Clamp the transform value to ensure it doesn't go out of bounds - const clampedTransform = Math.max(minTransform, Math.min(transformValue, maxTransform)); + const clampedTransform = Math.max(minTransform, Math.min(scrollDistance, maxTransform)); // Apply the clamped transform value to the indicator element const transform = `translate3d(${clampedTransform}px, 0, 0)`;