angular에서 스크롤 관련 다루기

scrollTop scrollLeft

초간단

<div #scrollMe [scrollLeft]="scrollMe.scrollWidth"></div>

<div #scrollMe [scrollTop]="scrollMe.scrollHeight"></div>

위와 같은 경우는 Expression has changed after it was checked. Previous value... 라는 에러 메시지를 노출 시킨다.
소스가 약간은 길지만 아래와 같이 처리해 주는 것이 좋다.

추천 소스

• html

<div #scrollMe [scrollTop]="scrolltop">....</div>

• ts

import { Component, Inject, ViewEncapsulation, ViewChild, ElementRef} from '@angular/core';

export class MyComponent {
  @ViewChild('scrollMe') scroll!: ElementRef;  
  public scrolltop: number | null = null;

  private afterValueChanged() {
    .......
    this.scrollToTop() // 데이타가 변경된곳에 이 소스를 추가하면 된다.
  }

  private scrollToTop() {
    setTimeout(() => {
      this.scrolltop = this.scroll.nativeElement.scrollHeight;
    }, 10);
  }