Прокрутите до центра элемента DIV - Angular 7

Question

Я хочу прокрутить к центру Y и X моего элемента, когда срабатывает определенная функция. Мой HTML выглядит так (я хочу прокрутить до середины #viewport):

 </div>
      <div #viewport class="document-view-port">
          <div #viewBox></div>
 </div>

Внутри моего TS я импортирую элементы вроде этого (здесь я пытаюсь найти центр y):

  @ViewChild('viewBox') viewBox: ElementRef;
  @ViewChild('viewport') viewport: ElementRef; 

Последние методы, которые я пытаюсь извлечь из этой центральной точки для прокрутки:

  zoomIn() {
    const elementRect = this.viewport.nativeElement.getBoundingClientRect();
    const absoluteElementTop = elementRect.top + window.pageYOffset;
    const middle = absoluteElementTop - (elementRect.height / 2);  
    this.viewport.nativeElement.scrollTo(0, middle)
  }

Я просто не могу этого сделать, любая помощь будет признательна

[править]

Метод scrollIntoView () ничего не делает в моем коде. Я хочу найти эти кординаты и прокрутить без использования какой-либо предопределенной функции

Answer 1

Вы должны использовать window.scrollTo(x, y) для достижения прокрутки:

zoomIn() {
    const elementRect = this.viewport.nativeElement.getBoundingClientRect();
    const absoluteElementTop = elementRect.top + window.pageYOffset;
    const middle = absoluteElementTop - (elementRect.height / 2);  
    window.scrollTo(0, middle); // have a window object reference in your component
  }