Angular5中scrollIntoView在设备宽度<1200px时失效求助

这个问题大概率是因为小屏设备下表格的滚动容器不是整个文档（document），而是某个嵌套的父容器，导致你直接调用元素的scrollIntoView()无法正确触发目标容器的滚动。下面一步步拆解原因和解决办法：

首先，修正HTML结构（可选但推荐） #

你当前把*ngFor放在<tbody>上，这会生成多个<tbody>标签，不符合标准表格结构。正确的做法是把循环放在<tr>上，保持一个<tbody>：

<tbody>
  <tr *ngFor="let User of FullTable; let i = index" id='{{User.username}}'>
    <th scope="row" style="vertical-align: middle;"> {{User.username}} </th>
  </tr>
</tbody>

这个调整不会直接解决滚动问题，但能避免潜在的布局异常。

核心问题：滚动容器不匹配 #

在大屏视图下，表格可能直接占满视口，滚动的是整个页面（document）；但小屏设备（<1200px）下，你可能给表格套了一个带overflow-y: auto的容器（比如固定高度的div），此时真正的滚动容器是这个父元素，而非document。直接调用document.getElementById(xxx).scrollIntoView()只会让视口滚动，不会触发父容器的滚动，所以才会出现“轻微跳动但定位失败”的现象。

解决方案：针对滚动容器进行定位 #

步骤1：标记滚动容器 #

给包裹表格的父容器添加模板引用变量，方便在组件中获取：

<!-- 假设你的表格被这个容器包裹 -->
<div #tableScrollContainer class="table-container" style="max-height: 500px; overflow-y: auto;">
  <table>
    <!-- 你的表格内容 -->
    <tbody>
      <tr *ngFor="let User of FullTable; let i = index" id='{{User.username}}'>
        <th scope="row" style="vertical-align: middle;"> {{User.username}} </th>
      </tr>
    </tbody>
  </table>
</div>

步骤2：在组件中获取容器并调整滚动逻辑 #

在组件里通过@ViewChild获取滚动容器，然后计算目标元素相对于容器的偏移量，手动设置容器的scrollTop：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  Search: string;
  FullTable: any[]; // 你的表格数据

  @ViewChild('tableScrollContainer') tableScrollContainer: ElementRef;

  onSearchChange() {
    const targetRow = document.getElementById(this.Search);
    if (!targetRow || !this.tableScrollContainer) return;

    const container = this.tableScrollContainer.nativeElement;
    // 计算目标行相对于容器的顶部偏移
    const relativeOffset = targetRow.offsetTop - container.offsetTop;
    // 让容器滚动到目标位置，可根据需要加减偏移量（比如容器的padding）
    container.scrollTop = relativeOffset - container.clientTop;
  }
}

备选方案：使用scrollIntoView的高级参数 #

现代浏览器支持scrollIntoView()传入配置对象，指定滚动容器和对齐方式，代码更简洁：

onSearchChange() {
  const targetRow = document.getElementById(this.Search);
  if (!targetRow || !this.tableScrollContainer) return;

  targetRow.scrollIntoView({
    behavior: 'smooth', // 可选：平滑滚动
    block: 'start', // 目标元素顶部对齐容器顶部
    inline: 'nearest',
    container: this.tableScrollContainer.nativeElement // 指定滚动容器
  });
}

注意：这个特性需要浏览器支持，Angular 5对应的浏览器版本（如Chrome 60+、Firefox 55+）都兼容。

额外检查点 #

• 确认小屏模式下，滚动容器的overflow-y属性是auto或scroll，而非hidden；
• 如果目标行有position: sticky/fixed样式，会影响offsetTop的计算，需要调整偏移量；
• 若搜索后表格数据有过滤，确保目标元素确实存在于DOM中（可加console.log(targetRow)排查）。

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