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

Я пытаюсь использовать 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. Спасибо за вашу помощь.


angular viewchild getelementbyid js-scrollintoview queryselector
person Cesar Herrera    schedule 30.03.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

Дополнительные сведения о ViewChild см. в документах.

person nash11    schedule 31.03.2020
comment
Но он тоже пытается с querySelector, так что думаю проблема в другом месте. Но вы абсолютно правы, в этом случае нужно использовать ViewChild. - person AlexanderFSP; 31.03.2020
comment
Моя ошибка, фактически я использую @ViewChild, но Angular 2 не поддерживает { static: true } - person Cesar Herrera; 01.04.2020
comment
@CesarHerrera В Angular 2 просто используйте @ViewChild('target') target: ElementRef; - person nash11; 01.04.2020

arrow_upward
0
arrow_downward

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

введите здесь описание изображения

person AlexanderFSP    schedule 31.03.2020
comment
Привет, я тоже пробовал с Chrome, и результат тот же. - person Cesar Herrera; 01.04.2020