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"});
}

我也使用了这个：（以及许多其他格式）

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'
    });
  }

如何将离子滚动元件的片段水平居中

1 个答案: