Angular nativeElement.scrollTop 有奇怪的行为

Posted

技术标签:

【中文标题】Angular nativeElement.scrollTop 有奇怪的行为【英文标题】:Angular nativeElement.scrollTop has weird behavior 【发布时间】:2020-04-20 04:13:51 【问题描述】:

你能告诉我为什么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 - 点击在大屏幕上查看

【问题讨论】:

我们可以看看你如何以及在哪里打电话给scrollToBottom吗? @ConnorsFan 请参见上面 gif 中的 161 行。 我的建议:在调用scrollToBottom()之前调用ChangeDetectorRef.detectChanges()更新视图。 @ConnorsFan 这对组件来说是不必要的开销,因为它将重新运行整个组件的更改检测。但是setTimeout()在这里效率更高。 【参考方案1】:

在访问原生 DOM 元素时,这似乎是 Angular 的一个错误。我已经完成了下面的操作,现在工作得很好。即使用setTimeout()

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

【讨论】:

以上是关于Angular nativeElement.scrollTop 有奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章

找不到模块'angular2/angular2'

Angular 6 和业力'无法加载“@angular-devkit/build-angular”,它未注册'

angular.js 的angular.copy angular.extend angular.merge

如何使用 @angular/upgrade 在 Angular 1 应用程序中使用 Angular 2 组件

Angular 1 和 Angular 2 集成:无缝升级的方法

Angular 6 中的 AuthHttp(从 Angular2 迁移到 Angular6)