设备宽度小于1200像素时，scrollIntoView不起作用

Question

我正在使用Angular 5并有一个表，在其中创建带有* ngFor的表行，并为它们提供一个ID（即用户名）。

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

我也有一个输入字段，我在其中监听更改，并想按用户名搜索用户并滚动到该表行。

<input class="form-control mr-sm-2" type="text" name="Search"
placeholder="Search" [(ngModel)]="Search" (input)="onSearchChange()">

onSearchChange函数看起来像这样

onSearchChange() {
  const scroll = document.getElementById(this.Search);
  scroll.scrollIntoView(false)
}

当我在浏览器中时，此方法效果很好，但是当我进入响应视图并且宽度小于1200px时，它将停止工作。 找到用户后，它仍然会向上/向下跳跃，但不会滚动到该用户。

有什么我想念的吗？ 这是正常行为吗？ 如果是这样，当我在较小的设备上时如何滚动到该元素？

Answer 1

我通过滚动偏移量而不是找到的元素来解决此问题。

所以首先我找到元素：

const scroll = document.getElementById(this.Search);

然后我计算offsetTop：

const TopPos = scroll.offsetTop;

然后，我用给定的偏移量滚动。