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