Ionic2中点击分段按钮能否让滚动容器滚动至该按钮完全可见？

当然可以实现这个需求！下面是结合你现有代码的具体实现方案：

步骤1：修改模板，添加元素引用 #

先给每个ion-segment-button添加统一的模板引用变量，保留你已有的#scroll滚动容器引用：

<div>
  <ion-scroll #scroll scrollX="true" class="browse-item-scrollx">
    <ion-segment [(ngModel)]="pet" color="primary">
      <ion-segment-button #segmentBtn (click)="goto(0)" value="1" tappable>
        1
      </ion-segment-button>
      <ion-segment-button #segmentBtn (click)="goto(1)" value="2" tappable>
        2
      </ion-segment-button>
      <ion-segment-button #segmentBtn (click)="goto(2)" value="3" tappable>
        3
      </ion-segment-button>
      <ion-segment-button #segmentBtn (click)="goto(3)" value="4" tappable>
        4
      </ion-segment-button>
    </ion-segment>
  </ion-scroll>
</div>

步骤2：在组件类中实现滚动逻辑 #

在页面组件里，通过Angular的视图装饰器获取滚动容器和所有分段按钮，然后在goto方法中计算滚动位置，确保目标按钮完全可见：

import { Component, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { Scroll } from 'ionic-angular';

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html'
})
export class YourPage {
  pet: string = '1';
  @ViewChild('scroll') scroll: Scroll;
  @ViewChildren('segmentBtn') segmentButtons: QueryList<ElementRef>;

  goto(index: number) {
    // 获取目标按钮的DOM元素
    const targetBtn = this.segmentButtons.toArray()[index].nativeElement;
    if (!targetBtn) return;

    // 计算滚动距离：确保按钮完全显示在容器可视范围内
    const scrollContainer = this.scroll._scrollContent.nativeElement;
    const requiredScrollX = targetBtn.offsetLeft + targetBtn.offsetWidth - scrollContainer.offsetWidth;
    // 避免滚动距离为负数（按钮已在可视区域内的情况）
    const finalScrollX = Math.max(requiredScrollX, 0);

    // 执行平滑滚动，时长300毫秒可按需调整
    this.scroll.scrollTo(finalScrollX, 0, 300);
  }
}

关键逻辑说明 #

• @ViewChildren('segmentBtn')会批量获取所有标记了#segmentBtn的按钮元素，通过toArray()能按顺序访问每个按钮。
• 计算滚动距离时，结合按钮的左偏移量、自身宽度和滚动容器的可视宽度，确保按钮滚动后完全处于可视区域内。
• scroll.scrollTo(x, y, duration)是Ionic Scroll组件的内置方法，支持平滑滚动效果，这里只需要处理X轴的滚动。

这样调整后，用户点击第3、4个分段按钮时，滚动容器就会自动滚动到对应按钮完全可见的位置了！

内容的提问来源于stack exchange，提问作者deep dalvi