Почему scrollIntoView () работает только со ссылкой на представление? - PullRequest
Новая
       76

Почему scrollIntoView () работает только со ссылкой на представление?

1 голос
/ 31 марта 2020

Я пытаюсь использовать scrollIntoView () для моего Angular 2 проекта. У меня есть контейнер div с переполнением, который увеличивается, когда данные поступают в компонент, и мне нужно прокрутить до конца div, когда данные поступят. Если я использую кнопку и пропускаю ссылку через нее, это нормально работает.

Пример: 

<div class="container">
<button (click)="scrollTo(target)"></button>
-----
-----
<!-- Dynamic content here -->
-----
-----
<div #target class="target" id="target"></div>

А в компоненте: 

public scrollTo(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
}

Проблема в том, что я не хочу использовать кнопку, мне нужно вызвать функцию scrollTo внутри компонента. Я пытался использовать @ViewChildren, document.querySelector и document.getElementById, но ничего не работает.

Пример:

1) 

@ViewChildren('target') target: ElementRef;

И в функции : 

public scrollTo() {
    this.target.nativeElement.scrollIntoView({behavior: 'smooth'});
}

2) 

public scrollTo() {
    let element = document.getElementById('target');
    element.scrollIntoView({behavior: 'smooth'});
}

3) 

public scrollTo() {
    let element = document.querySelector('.target');
    element.scrollIntoView({behavior: 'smooth'});
}

Во всех случаях, если я печатаю элемент с консоли, результат одинаков: 

<div class="target" id="target" _ngcontent-ema-86=""></div>

Но прокрутка переходит в нижнюю часть контейнера div только с помощью кнопки.

Дополнительные данные: проект является надстройкой VSTO для PowerPoint и должен работать в IE11. Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Возможно проблема из-за плавной поддержки поведения в IE11. Вы пробовали без него?

enter image description here

0 голосов
/ 31 марта 2020

Вам нужно использовать ViewChild, а не ViewChildren. ViewChild используется, когда вы хотите получить доступ к одному элементу из шаблона. ViewChildren используется, когда в шаблоне несколько элементов с одинаковым идентификатором (#target). Последний даст вам массив.

Попробуйте вместо этого. 

@ViewChild('target', { static: true }) target: ElementRef;

public scrollTo() {
    this.target.nativeElement.scrollIntoView({behavior: 'smooth'});
}

Проверьте документы для получения более подробной информации о ViewChild.

...