Ioinc 2/Angular 2 - 如何滚动到底部 div?

Question

每当收到新消息时，我想自动将特定的div滚动到底部。我找到的解决方案只提到了content元素的滚动。

<ion-content class="page mc-page">
<div class="chatpanel">
<!--I want to auto scroll .chattxt-w -->
<div class="chattxt-w" #chattxt>
<!--load all messages-->
<div class="wtxt s3 msgitem" text-left *ngFor="let msgs of messages">{{msgs.msg}}</div>
</div>
</div>
</ion-content>

Answer 1

您必须使用 ViewChild，并在每次收到新消息时向下滚动。您可以这样做：

@Component(...)
export class YourComponent {
ViewChild('chattxt') chattxt: ElementRef;
onMessageRevieved(){
this.chattxt.nativeElement.scrollTop = this.chattxt.nativeElement.scrollHeight
}
}

希望这有帮助。

Answer 2

<ion-content>

在此处添加您的内容！

</ion-content>
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{

@ViewChild(Content) content: Content;

scrollToTop() {
this.content.scrollToTop();

}}

我认为这会有所帮助