Ionic 4 ion-content scroll to bottom
Due to recent changes on ionic 4, I found the code in suggested answer no longer works for me. Hope this helps all the new comers.
import { IonContent } from '@ionic/angular';
export class IonicPage implements OnInit {
@ViewChild(IonContent, {read: IonContent, static: false}) myContent: IonContent;
constructor() {}
ScrollToBottom(){
setTimeout(() => {
this.myContent.scrollToBottom(300);
}, 1000);
}
}
No id specified in .html file for < ion-content >
Official documentation refers to ion-content. Ionic version used listed below at the time of this post.
Ionic CLI : 5.4.13 Ionic Framework : @ionic/angular 4.11.3 @angular/cli : 8.1.3
You can reach the bottom of the content with the method scrollToBottom()
scrollToBottom(duration?: number) => Promise<void>
Add an ID to the ion-content
<ion-content #content>
</ion-content>
Get the content ID in .ts and call the scrollToBottom method with a chosen duration
@ViewChild('content') private content: any;
ngOnInit() {
this.scrollToBottomOnInit();
}
scrollToBottomOnInit() {
this.content.scrollToBottom(300);
}
https://ionicframework.com/docs/api/content
EDIT:
ViewChild gets the correct data with the provided content ID
@ViewChild('content') private content: any;
ngOnInit vs ionViewDidEnter / ionViewWillEnter
ngOnInit doesn't trigger if you come back from a navigation stack, ionViewWillEnter / ionViewDidEnter will. So if you place the function in ngOnInit, the scrollToBottom won't work if you navigate back.