fix(segment-view): always check the scrollLeft against the initial to get scrollDistance

Author: brandyscarney

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({

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)`;