文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动到垫子上的页面顶部-分页“每页项”更改-角度11

问滚动到垫子上的页面顶部-分页“每页项”更改-角度11
EN

Stack Overflow用户

提问于 2021-06-15 19:03:49

回答 1查看 1.6K关注 0票数 2

我希望页面滚动到顶部，如果用户改变mat-paginator‘项目每页’。scrollIntoView()不起作用。我在代码中使用了(page)="pageEvent = handlePage($event)，可以捕获事件更改，但无法将事件绑定到scrollIntoView事件。我也尝试过window.scrollTo(0,0)，但它也不起作用。

html

<table  **id="box"** mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="productCode">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="productCodeFilter" placeholder="Product Code">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.productCode}} </td>
      </ng-container>

      <ng-container matColumnDef="batchNo">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="batchNoFilter" placeholder="Batch Number">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.batchNo}} </td>
      </ng-container>
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="descriptionFilter" placeholder="Description">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.description}} </td>
      </ng-container>
      <ng-container matColumnDef="qty">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="qtyFilter" placeholder="Quantity">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.qty}} </td>
      </ng-container>
      <ng-container matColumnDef="binId">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="binIdFilter" placeholder="Bin Id">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.binId}} </td>
      </ng-container>

      <ng-container matColumnDef="zone">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="zoneFilter" placeholder="Zone">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.zone}} </td>
      </ng-container>

      <ng-container matColumnDef="containerId">
        <th mat-header-cell *matHeaderCellDef>
          <mat-form-field class="p-1" style="text-align:center;">
            <input matInput class="form-field" [formControl]="containerIdFilter" placeholder="Container Id">
          </mat-form-field>
        </th>
        <td mat-cell *matCellDef="let element"> {{element.containerId}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <mat-paginator *ngIf="dataSource!==undefined && dataSource.data.length!==0" class="float-right mt-2"
    [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons **(page)="pageEvent = handlePage($event)"**>
  </mat-paginator>

handlePage(e: any) {
      //debugger;
      var element = document.getElementById("box");
      //alert('hi');
      element.scrollIntoView(true);
      //window.scrollTo(0,0)
    }

angular

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-17 05:07:01

我为这个issue.Just找到了一个简单的修复方法，将一个id添加到顶级div (如果您想要滚动到顶部)，或者在单击后希望它滚动到哪里。

HTML：

<div class="container-fluid" #focus>
     <mat-paginator (page)="scrollUp()"></mat-paginator>
</div>

TS：

这里，tableInput用于获取“焦点”元素的引用。然后我们使用scrollIntoView()滚动到它定义的元素。

@ViewChild('focus', { read: ElementRef }) tableInput: ElementRef;
scrollUp(): void {
    setTimeout(() => this.tableInput.nativeElement.scrollIntoView({ behavior: 'smooth', block: "end" }));
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67992090

复制

相似问题

问滚动到垫子上的页面顶部-分页“每页项”更改-角度11
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到垫子上的页面顶部-分页“每页项”更改-角度11EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动到垫子上的页面顶部-分页“每页项”更改-角度11
EN