mat-vertical-stepper点击Next后自动滚动至步骤起始位置

安全阿岳

2026-8-18

解决mat-vertical-stepper切换步骤后自动滚动至当前步骤顶部

针对长表单使用mat-vertical-stepper时，点击Next后页面滚动位置保留导致新步骤从底部开始显示的问题，可通过监听步骤切换事件，自动滚动到当前步骤起始位置解决，具体实现如下：

步骤1：模板层添加引用与事件绑定

给<mat-vertical-stepper>添加模板引用变量，并绑定selectionChange事件：

<mat-vertical-stepper #stepper (selectionChange)="onStepChange($event)">
  <!-- 你的步骤表单内容 -->
</mat-vertical-stepper>

步骤2：组件层实现滚动逻辑

通过ViewChild获取stepper实例，在步骤切换时定位到当前步骤的标题元素并执行滚动：

import { Component, ViewChild } from '@angular/core';
import { MatVerticalStepper, StepperSelectionEvent } from '@angular/material/stepper';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourStepperComponent {
  @ViewChild('stepper') stepper!: MatVerticalStepper;

  onStepChange(event: StepperSelectionEvent) {
    // 获取当前激活步骤的标题DOM元素
    const activeStepTitle = this.stepper.selected?.stepLabel._elementRef.nativeElement;
    if (activeStepTitle) {
      // 平滑滚动到元素顶部，block: 'start'确保标题对齐视口上方
      activeStepTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}