Javascript Angular nativeElement.scrollTop具有奇怪的行为
你能告诉我为什么Javascript Angular nativeElement.scrollTop具有奇怪的行为,javascript,html,angular,typescript,ionic4,Javascript,Html,Angular,Typescript,Ionic4,你能告诉我为什么this.myScrollContainer.nativeElement.scrollTop没有得到this.myScrollContainer.nativeElement.scrollHeight的赋值吗?这里发生了什么 .ts .html Gif-单击可在大屏幕上查看 在访问本机DOM元素时,这似乎是一个错误。我已经完成了下面的工作,现在工作得非常好。i、 e.使用setTimeout() 我们可以看看您调用scrollToBottom的方式和位置吗?@ConnorsFan请
this.myScrollContainer.nativeElement.scrollTop
没有得到this.myScrollContainer.nativeElement.scrollHeight的赋值吗?这里发生了什么
.ts
.html
Gif-单击可在大屏幕上查看
在访问本机DOM元素时,这似乎是一个错误。我已经完成了下面的工作,现在工作得非常好。i、 e.使用
setTimeout()
我们可以看看您调用
scrollToBottom
的方式和位置吗?@ConnorsFan请参见上面gif上的第161行。我的建议是:调用ChangeDetectorRef.detectChanges()
在调用scrollToBottom()之前更新视图
@ConnorsFan这对组件来说是不必要的开销,因为它将重新运行整个组件的更改检测。但是setTimeout()
在这里更有效。
@ViewChild('scrollMe', { static: false }) private myScrollContainer: ElementRef;
scrollToBottom(): void {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}
<div class="row2" #scrollMe>
<ion-row>
<ion-col>
<app-school></app-school>
</ion-col>
</ion-row>
</div>
.content {
ion-grid {
display: flex;
flex-direction: column;
height: 100% !important;
}
.row1 {
flex: 2 !important;
}
.row2 {
flex: 5 !important;
overflow: scroll !important;
}
}
scrollToBottom(): void {
setTimeout(() => { this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight; }, 1);
}