如何在带滚动条的容器内跳转/滚动到Material Table指定行？

当表格被包裹在固定高度、自带滚动条的容器中时，原生的scrollIntoView()会默认让元素相对于整个页面视口滚动，而非容器内部，导致跳转失效。以下是适配嵌套滚动场景的优雅解决方案（基于Angular + Angular Material）：

核心思路 #

直接操作滚动容器的滚动行为，计算目标元素在容器内的偏移量，让容器滚动到对应位置，而非依赖页面视口的滚动。

实现步骤 #

1. 组件类中获取滚动容器与目标元素 #

使用Angular的ViewChild获取滚动容器（替代原生getElementById，更符合组件化规范）：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 通过模板引用变量获取滚动容器
  @ViewChild('scrollContainer') private scrollContainer!: ElementRef<HTMLDivElement>;

  onBeamIdInputChange(id: string): void {
    const targetEl = document.getElementById(id);
    if (!targetEl || !this.scrollContainer.nativeElement) return;

    const container = this.scrollContainer.nativeElement;
    // 计算目标元素相对于容器顶部的偏移量
    const relativeTop = targetEl.offsetTop - container.offsetTop;
    // 计算居中滚动的位置：目标偏移 - 容器高度/2 + 元素高度/2
    const scrollPosition = relativeTop - (container.clientHeight / 2) + (targetEl.clientHeight / 2);

    // 平滑滚动到目标位置
    container.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
}

2. 修改模板结构 #

给滚动容器添加模板引用变量，并确保目标元素的ID正确绑定：

<div>始终显示的内容 - <input matInput type="text" (input)="onBeamIdInputChange($event.target.value)" placeholder="跳转到指定ID"></div>
<!-- 添加模板引用变量#scrollContainer -->
<div #scrollContainer style="height: 500px; overflow: auto;">
  <table mat-table> <!-- 表头固定 -->
    <!-- 表格列定义 -->
    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef> 序号 </th>
      <td mat-cell *matCellDef="let i = index"> 
        <span [id]="i.toString()"></span>{{ i }} 
      </td>
    </ng-container>
    <!-- 其他列... -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

3. 更优雅的元素获取方式（可选） #

如果不想使用getElementById，可以用ViewChildren获取所有目标元素：

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

@Component({
  // ... 组件元数据
})
export class YourComponent {
  @ViewChild('scrollContainer') private scrollContainer!: ElementRef<HTMLDivElement>;
  @ViewChildren('cellMarker') private cellMarkers!: QueryList<ElementRef<HTMLSpanElement>>;

  onBeamIdInputChange(id: string): void {
    const targetEl = this.cellMarkers.find(marker => marker.nativeElement.id === id)?.nativeElement;
    if (!targetEl || !this.scrollContainer.nativeElement) return;

    // 后续滚动逻辑同上
    const container = this.scrollContainer.nativeElement;
    const relativeTop = targetEl.offsetTop - container.offsetTop;
    const scrollPosition = relativeTop - (container.clientHeight / 2) + (targetEl.clientHeight / 2);
    container.scrollTo({ top: scrollPosition, behavior: 'smooth' });
  }
}

模板中给span添加模板引用变量：

<span #cellMarker [id]="i.toString()"></span>

为什么原方法失效 #

scrollIntoView({block: 'center'})的作用是让目标元素在浏览器视口中居中，而非在父滚动容器内居中。当表格被包裹在自定义滚动容器中时，该方法会触发页面滚动，将容器本身带到视口中间，而非容器内部滚动到目标行。

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