javascript - 当设备宽度小于 1200px 时，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;

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