diff --git a/core/src/components/segment-content/segment-content.ios.scss b/core/src/components/segment-content/segment-content.ios.scss
index 026e16b1f9..aee6789be1 100644
--- a/core/src/components/segment-content/segment-content.ios.scss
+++ b/core/src/components/segment-content/segment-content.ios.scss
@@ -3,7 +3,3 @@
 
 // iOS Segment Content
 // --------------------------------------------------
-
-:host(.segment-content-disabled) {
-  opacity: $segment-button-ios-opacity-disabled;
-}
diff --git a/core/src/components/segment-content/segment-content.md.scss b/core/src/components/segment-content/segment-content.md.scss
index 1432941bc1..ea64ce72d8 100644
--- a/core/src/components/segment-content/segment-content.md.scss
+++ b/core/src/components/segment-content/segment-content.md.scss
@@ -3,7 +3,3 @@
 
 // Material Design Segment Content
 // --------------------------------------------------
-
-:host(.segment-content-disabled) {
-  opacity: $segment-button-md-opacity-disabled;
-}
diff --git a/core/src/components/segment-content/segment-content.scss b/core/src/components/segment-content/segment-content.scss
index 464402b41f..4a68e8e9e1 100644
--- a/core/src/components/segment-content/segment-content.scss
+++ b/core/src/components/segment-content/segment-content.scss
@@ -9,3 +9,7 @@
 
   width: 100%;
 }
+
+:host(.segment-content-disabled) {
+  display: none;
+}
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index ce012a3aaa..e9ff9d113d 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -401,7 +401,38 @@ export class Segment implements ComponentInterface {
 
       const { scrollDistancePercentage, scrollDistance } = ev.detail;
 
-      const nextIndex = scrollDistance > 0 ? currentIndex + 1 : currentIndex - 1;
+      const findIndexFrom = (
+        array: HTMLIonSegmentButtonElement[],
+        predicate: (button: HTMLIonSegmentButtonElement) => boolean,
+        startIndex: number
+      ) => {
+        for (let i = startIndex; i < array.length; i++) {
+          if (predicate(array[i])) {
+            return i;
+          }
+        }
+        return -1;
+      };
+
+      const findIndexFromReverse = (
+        array: HTMLIonSegmentButtonElement[],
+        predicate: (button: HTMLIonSegmentButtonElement) => boolean,
+        startIndex: number
+      ) => {
+        for (let i = startIndex; i >= 0; i--) {
+          if (predicate(array[i])) {
+            return i;
+          }
+        }
+        return -1;
+      };
+
+      // Find the next valid button (i.e. we need to ignore any disabled buttons)
+      const nextIndex =
+        scrollDistance > 0
+          ? findIndexFrom(buttons, (ref) => !ref.disabled, currentIndex + 1)
+          : findIndexFromReverse(buttons, (ref) => !ref.disabled, currentIndex - 1);
+
       if (nextIndex >= 0 && nextIndex < buttons.length) {
         const nextButton = buttons[nextIndex];
         const nextButtonWidth = nextButton.getBoundingClientRect().width;
@@ -420,8 +451,10 @@ export class Segment implements ComponentInterface {
           .reduce((acc, ref) => acc + ref.getBoundingClientRect().width, 0);
         indicator.style.left =
           scrollDistance > 0
-            ? `${distanceToCurrentButton + currentButton.getBoundingClientRect().width * scrollDistancePercentage}px`
-            : `${distanceToNextButton + nextButtonWidth - nextButtonWidth * scrollDistancePercentage}px`;
+            ? `${distanceToCurrentButton + distanceToNextButton * scrollDistancePercentage}px`
+            : `${
+                distanceToNextButton + distanceToCurrentButton - distanceToCurrentButton * scrollDistancePercentage
+              }px`;
 
         // Transition the color of the indicator if we've crossed the halfway point
         if (scrollDistancePercentage > 0.5) {