javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brandy Carney
2024-09-25 15:16:54 -04:00
parent c7bae079c2
commit 7fe1c094ec
2 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/segment-view/segment-view.tsx
View File

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

5
core/src/components/segment/segment.tsx
View File

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