diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 78bb13ac4f4..08cdc3e3f2b 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -88,6 +88,22 @@ export class Segment implements ComponentInterface {
this.valueAfterGesture = value;
}
}
+
+ if (this.scrollable) {
+ const buttons = this.getButtons();
+ const activeButton = buttons.find((button) => button.value === value);
+ if (activeButton !== undefined) {
+ /**
+ * Scrollable segment buttons should be
+ * centered within the view including
+ * buttons that are partially offscreen.
+ */
+ activeButton.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ });
+ }
+ }
}
/**
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index 03ffb568ac6..be76eafb288 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -29,6 +29,17 @@
+
+
+ Button 1
+ Button 3
+ Button 3
+ Button 4
+ Button 5
+ Button 6
+
+
+
Bookmarks