滚动到 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
  }