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 有奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章
Angular 6 和业力'无法加载“@angular-devkit/build-angular”,它未注册'
angular.js 的angular.copy angular.extend angular.merge
如何使用 @angular/upgrade 在 Angular 1 应用程序中使用 Angular 2 组件