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

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 2

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

Answer 3

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.