0

In my Ionic 3 application, the chat messages are listed from top to bottom, where the message at the bottom is the latest. I display all the messages on the page and want the page to locate at the bottom when it is opened.

I use the scrollToBottom method to do that now, but I can see the process is that the page starts from the top and scrolls to bottom. It is not quite neat. Is there a way just show the page from the bottom when it is opened?

HTML file:

<ion-content (ionScroll)="scrolling($event)" (ionScrollEnd)="scrollComplete($event)">
  <div class="message-wrap">
    <div *ngFor="let msg of msgList;>
       msg.content
    </div>
  </div>

.ts file:

ionViewDidEnter() {
   this.scrollToBottom();
}

scrollToBottom() {
  if (this.content.scrollToBottom) {
    this.content.scrollToBottom().then(()=>{
      this.loading.dismiss()
    });
  }
}
kmoser
  • 8,780
  • 3
  • 24
  • 40
lei lei
  • 1,753
  • 4
  • 19
  • 44
  • 2
    There's no such `scrolltobottom` native *method* in JS. What have you googled regarding *"How to scroll to bottom"* and what have you tried? Please read [ask]. [edit] and create a [mcve]. – Roko C. Buljan Aug 08 '20 at 11:16
  • Is [this](https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) answer is helpful? – Smollet777 Aug 08 '20 at 11:32

0 Answers0