scrollIntoView не работает, когда ширина устройства меньше 1200 пикселей - PullRequest
0 голосов
/ 23 мая 2018

Я использую Angular 5 и у меня есть таблица, в которой я создаю строки таблицы с * ngFor и даю им идентификатор, который является именем пользователя.

<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)
}

Это хорошо работает, когда я вмой браузер, но когда я перехожу в адаптивный вид и шириной 1200 пикселей, он перестает работать.Он все еще немного подпрыгивает, когда находит Пользователя, но не переходит к Пользователю.

Есть что-то, что я пропускаю?Это нормальное поведение?Если у меня есть возможность прокрутки к элементу, когда я на маленьком устройстве?

1 Ответ

0 голосов
/ 24 мая 2018

Я исправил проблему, прокручивая по смещению, а не по найденному элементу.

Итак, сначала я нахожу элемент:

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

, а затем вычисляю offsetTop:

const TopPos = scroll.offsetTop;

Затем я прокручиваю с заданным смещением.

...