点击折叠面板项时模态框左侧滚动条回顶，如何修复？

初始加载页面后，点击Sales折叠面板，再选择‘Total reported and forecasted sales’选项时，页面滚动条会自动跳转到顶部。对应的UI实现代码如下：

<ng-container *ngIf="cciLeftSideFilterSplitIO && dataSetName === 'DRUGS'">
            <div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'">
                <div class="drugSaleGroupContainer" *ngIf="regions.length > 0">
                    <form [formGroup]="drugSaleForm">
                        <mat-form-field appearance="outline" class="drugSaleRegion">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleRegion" | translate}}&nbsp;</span>
                            </mat-label>
                            <mat-select (click)="showRegion()" panelClass="select-panel-class" [formControlName]="'drugSaleRegionCtrl'">
                              <mat-option *ngFor="let region of regions" [value]="region.optionName">{{region.optionName}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearFrom" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="fromYear.open()" appNonNumeric matInput [min]="minYearFrom" [max]="maxYearFrom" [(ngModel)]="selectedFromYear"
                            [matDatepicker]="fromYear" class="dateInputElmt"
                            formControlName="drugSaleYearFromCtrl" (ngModelChange)="datePickedEvent('input','from', $event)">
                            <mat-datepicker-toggle matSuffix [for]="fromYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #fromYear startView= 'multi-year' (yearSelected)="chosenYearHandler('from', $event, fromYear)"></mat-datepicker>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearTo" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="toYear.open()" appNonNumeric matInput [min]="minYearTo" [max]="maxYearTo" [(ngModel)]="selectedToYear" 
                            [matDatepicker]="toYear" class="dateInputElmt"
                            formControlName="drugSaleYearToCtrl" (ngModelChange)="datePickedEvent('input','to', $event)">
                            <mat-datepicker-toggle matSuffix [for]="toYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #toYear startView= 'multi-year' (yearSelected)="chosenYearHandler('to',$event,toYear)" ></mat-datepicker>
                        </mat-form-field>
                        <span class="drugSaleBtnGroup">
                            <button class="drugSaleClearBtn" (click)="clearSalesFilter()">Clear</button>
                        </span>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="From" formControlName="drugSaleValueFromCtrl">
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl">
                        </mat-form-field>
                    </form>
                </div>
            </div>
        </ng-container>

问题原因 #

这种滚动跳顶现象大多是因为动态渲染的表单控件自动获取焦点，触发页面滚动到控件所在位置；或者折叠面板的展开逻辑中存在主动设置滚动位置的代码。从提供的代码来看，表单中的输入框（年份选择、数值输入）在组件渲染完成后可能自动获取焦点，导致页面滚动到顶部。

解决方案 #

1. 禁止表单控件自动获取焦点 #

给所有mat-input添加[autofocus]="false"属性，阻止其自动获取焦点：

<!-- 以年份输入框为例 -->
<input appDrugSaleYearFormat (click)="fromYear.open()" appNonNumeric matInput [min]="minYearFrom" [max]="maxYearFrom" [(ngModel)]="selectedFromYear"
        [matDatepicker]="fromYear" class="dateInputElmt"
        formControlName="drugSaleYearFromCtrl" (ngModelChange)="datePickedEvent('input','from', $event)" [autofocus]="false">

对代码中所有的input元素都添加该属性，避免焦点触发滚动。

2. 保存并恢复滚动位置 #

在点击‘Total reported and forecasted sales’前记录当前滚动位置，待组件渲染完成后恢复：

// 组件类中添加逻辑
private scrollPosition: number = 0;

// 假设触发该选项的函数为openSalesFilter
openSalesFilter() {
  // 记录当前滚动位置
  this.scrollPosition = window.scrollY;
  // 原有打开折叠面板/渲染UI的逻辑
}

// 视图渲染完成后恢复滚动位置
ngAfterViewChecked() {
  window.scrollTo(0, this.scrollPosition);
}

可添加额外条件判断，仅在需要时执行恢复操作，避免干扰其他场景的滚动行为。

3. 检查折叠面板的展开逻辑 #

排查Sales折叠面板的展开代码，确认是否存在window.scrollTo(0, 0)或类似强制滚动到顶部的代码，若有则移除该逻辑。

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