設備寬度小於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;

然后，我用給定的偏移量滾動。