Programmatically scroll ion-segment

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

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 3

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>