Как центрировать сегмент по горизонтали от элемента ионной прокрутки

Question

В основном у меня есть ионная прокрутка с несколькими кнопками, которые занимают больше места, чем само окно.Мне бы хотелось, чтобы после того, как вы нажали кнопку, чтобы она была центрирована по горизонтали на экране.Со следующим кодом он работает в Chrome, но не на мобильном (IOS), и я не могу понять, почему.

<ion-scroll scrollX="true" style="width: 100%; white-space: nowrap; height: 32px; margin: 10px 0 20px 0;">
    <ion-segment nowrap [(ngModel)]="subject" *ngIf="rankingsSubjects.length > 1" class="various-width-segments">
        <ion-segment-button *ngFor="let subject of subjects; let i = index" [id]="'subject_'+subject.value" [value]="subject.value" (click)="centerButton($event)">
            {{subject.text}}
        </ion-segment-button>
    </ion-segment>
</ion-scroll>

И .ts

centerButton(event) {
    event.target.scrollIntoView({inline: "center"});
}

IЯ также использовал это: (плюс многие другие форматы)

const el = document.getElementById(elementId);
el.scrollIntoView({inline: "center"});

Кажется, что ничего не работает на мобильных устройствах, хотя в Chrome он идеально центрируется.Я тестировал только на IOS, поэтому не знаю, работает ли он на Android.

Answer 1

COMPONENT.HTML

<ion-segment-button value="" (ionSelect)="segmentButtonClicked($event)">
  <ion-label>Heroes</ion-label>
</ion-segment-button>

<ion-segment-button value="Marvel Comics" (ionSelect)="segmentButtonClicked($event)">
  <ion-label>Marvel Comics</ion-label>
</ion-segment-button>

<ion-segment-button value="DC Comics" (ionSelect)="segmentButtonClicked($event)">
  <ion-label>DC Comics</ion-label>
</ion-segment-button>

<ion-segment-button value="DC Comics 1" (ionSelect)="segmentButtonClicked($event)">
  <ion-label>DC Comics1</ion-label>
</ion-segment-button>

<ion-segment-button value="DC Comics 1" (ionSelect)="segmentButtonClicked($event)">
  <ion-label>Marvel Comics1</ion-label>
</ion-segment-button>

COMPONENT.TS

  
segmentButtonClicked(event) {
    event.target.scrollIntoView({
      behavior: 'smooth', //  smooth value triggers smooth scroll.
      inline: 'center'
    });
  }