Angular nativeElement.scrollTop 有奇怪的行为

Question

你能告诉我为什么 this.myScrollContainer.nativeElement.scrollTop 没有得到这个 this.myScrollContainer.nativeElement.scrollHeight 的赋值吗？这里发生了什么？

.ts

 @ViewChild('scrollMe', { static: false }) private myScrollContainer: ElementRef;

  scrollToBottom(): void {
     this.myScrollContainer.nativeElement.scrollTop =  this.myScrollContainer.nativeElement.scrollHeight;
   }

.html

<div class="row2" #scrollMe>
      <ion-row>
        <ion-col>
          <app-school></app-school>
        </ion-col>
      </ion-row>
    </div>

.scss

.content {
    ion-grid {
        display: flex;
        flex-direction: column;
        height: 100% !important;
    }

    .row1 {
        flex: 2 !important;
    }

    .row2 {
        flex: 5 !important;
        overflow: scroll !important;
    }
}

Gif - 单击以在大屏幕上查看

Answer 1

访问本机 DOM 元素时，Angular 上似乎存在错误。我已经像下面那样做了，现在工作得很好。即使用 setTimeout()

scrollToBottom(): void {
   setTimeout(() => { this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight; }, 1);
  }

Angular nativeElement.scrollTop 有奇怪的行为

Angular nativeElement.scrollTop has weird behavior

html

javascript

typescript

angular

ionic4