Angular 5 选项卡滚动到页面顶部

Question

我正在使用 Angular 5 选项卡，问题是当我从一个选项卡切换到另一个选项卡时，页面将滚动到页面顶部。有谁知道我该如何解决这个问题。

<div class="row">
  <div class="col-md-12">
    <mat-tab-group dynamicHeight="true">
      <ng-container *ngFor="let rubric of assessmentForm.rubrics">
        <mat-tab label="{{rubric.title}}">
          <div class="table-responsive">
            <table class="table table-bordered wrappedTable">
              <thead>
              <tr>
               <td></td>
              </tr>
              </tfoot>
            </table>
          </div> <!-- /table-responsive -->
        </mat-tab>
      </ng-container>
    </mat-tab-group>
  </div>
</div> <!-- /row -->

我遗漏了表内的一些代码，可能不会影响该问题。

Answer 1

原因是当您更改选项卡时，下一个选项卡的内部内容没有那么多高度，因此父级高度也会减小，这就是为什么它滚动到顶部可以通过添加 min-height 来修复，例如：

<div class="col-md-12" style="min-height:800px;">
  <mat-tab-group dynamicHeight="true">
   ....content
  </mat-tab-group>
</div>