Programmatically scroll ion-segment - ionic-framework

Question

Is there any way to control scrolling on segments? In my case the slider and segments depends on each other and when you swipe slides, overflowwing segments does not slide, but active segment will be correctly choosed
My view and controller code:
<ion-segment scrollable mode="md" (ionChange)="segmentChanged()" [(ngModel)]="segment" color="warning">
<ion-segment-button mode="md" value="0">
<p>Description</p>
</ion-segment-button>
<ion-segment-button mode="md" value="1">
<p>Interconnections</p>
</ion-segment-button>
<ion-segment-button mode="md" value="2">
<p>Declensions</p>
</ion-segment-button>
</ion-segment>
<ion-slides (ionSlideDidChange)="slideChanged()" pager="true">
<ion-slide>
First
</ion-slide>
<ion-slide>
second
</ion-slide>
<ion-slide>
third
</ion-slide>
</ion-slides>
segmentChanged() {
this.slider.slideTo(this.segment);
}
async slideChanged() {
this.segment = await this.slider.getActiveIndex();
}
The segment itself works fine, but when swiping the active segment goes behind the screen.

Answer 1

I am also facing the same issue and finally solved the issue with below code.
you must define the unique "id" for each "ion-segment-button"
<ion-segment-button SwipedTabs *ngFor="let category of tabs ; let i = index"
value={{category}} (click)="selectTab(i)" **id="segment-{{i}}**">
<ion-label>{{category}}</ion-label>
</ion-segment-button>
.ts code
async slideChanged() {
this.activeIndex= await this.slider.getActiveIndex();
document.getElementById("segment-" + activeIndex).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center'
});
}
hope it helps.

Answer 2

For anyone who is looking for Ionic + React + TypeScript solution:-
const [selectedTab, setSelectedTab] = useState<string>("0");
const sliderRef = useRef<HTMLIonSlidesElement>(null);
function onTabChange(value: string) {
if (value === "" || value == null || value === undefined) return;
sliderRef.current?.slideTo(parseInt(value));
}
async function onSlideChange() {
let slideIndex = await sliderRef?.current?.getActiveIndex();
if(slideIndex == null || slideIndex === undefined)
return;
setSelectedTab(slideIndex.toString());
document.getElementById("tab-" + slideIndex)?.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "center",
});
}
<IonSegment scrollable value={selectedTab} onIonChange={(e) => onTabChange(e.detail.value ?? "")}>
<IonSegmentButton value="0" id="tab-0">
<IonLabel>Tab 0</IonLabel>
</IonSegmentButton>
....
</IonSegment>
<IonSlides ref={sliderRef} options={slideOpts} onIonSlideDidChange={() => {onSlideChange();}}>
<IonSlide>
<h1>Slide 0</h1>
</IonSlide>
....
</IonSlides>

Answer 3

document.getElementById("your-id").scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center'
});
<ion-segment scrollable [(ngModel)]="currentTab">
<ion-segment-button value="subject" id="subject">
<ion-label>ASSUNTO</ion-label>
</ion-segment-button>
<ion-segment-button value="book" id="books">
<ion-label>LIVROS</ion-label>
</ion-segment-button>
</ion-segment>
Works great!

Answer 4

Interesting question.
It's not supported out of the box. I'm not sure if it's possible to do because, as I understand it, there is no way to get at the insides of the ion-segment web component unless there is an API exposed.
This encapsulation is how the components can be dropped into the page and not conflict with other stuff.
If it's super important to your project you could consider creating your own segment from copying the code of the segment and segment-button components into your own separate version?

Answer 5

Check this out, it should help Ionic 4 Segments and Slides
The .html can be like this:
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Ionic 4 Segment</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-segment scrollable>
<ion-segment-button value="0" checked>
<ion-icon name="call"></ion-icon>
<ion-label>Call</ion-label>
</ion-segment-button>
<ion-segment-button value="1">
<ion-icon name="cloud-upload"></ion-icon>
<ion-label>Publish</ion-label>
</ion-segment-button>
<ion-segment-button value="2">
<ion-icon name="paper"></ion-icon>
<ion-label>Topic</ion-label>
</ion-segment-button>
<ion-segment-button value="3">
<ion-icon name="code-working"></ion-icon>
<ion-label>Query</ion-label>
</ion-segment-button>
<ion-segment-button value="4">
<ion-icon name="open"></ion-icon>
<ion-label>Open</ion-label>
</ion-segment-button>
<ion-segment-button value="5">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-segment-button>
<ion-segment-button value="6">
<ion-icon name="create"></ion-icon>
<ion-label>Write</ion-label>
</ion-segment-button>
<ion-segment-button value="7">
<ion-icon name="book"></ion-icon>
<ion-label>Read</ion-label>
</ion-segment-button>
<ion-segment-button value="8">
<ion-icon name="trash"></ion-icon>
<ion-label>Trash</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides>
<ion-slide class="slide-1">
Call
</ion-slide>
<ion-slide class="slide-2">
Publish
</ion-slide>
<ion-slide class="slide-3">
Topic
</ion-slide>
<ion-slide class="slide-1">
Query
</ion-slide>
<ion-slide class="slide-2">
Open
</ion-slide>
<ion-slide class="slide-3">
Search
</ion-slide>
<ion-slide class="slide-1">
Write
</ion-slide>
<ion-slide class="slide-2">
Read
</ion-slide>
<ion-slide class="slide-3">
Trash
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
Then the js like this
var segment = document.querySelector('ion-segment');
var slides = document.querySelector('ion-slides');
segment.addEventListener('ionChange', (ev) => onSegmentChange(ev));
slides.addEventListener('ionSlideDidChange', (ev) =>
onSlideDidChange(ev));
// On Segment change slide to the matching slide
function onSegmentChange(ev) {
slideTo(ev.detail.value);
}
function slideTo(index) {
slides.slideTo(index);
}
// On Slide change update segment to the matching value
async function onSlideDidChange(ev) {
var index = await slides.getActiveIndex();
clickSegment(index);
}
function clickSegment(index) {
segment.value = index;
}
I hope this helps anyone