I have been developing a chat application recently and when I open a chat page to show a current conversation I wanted the page to automatically scroll to the bottom so the user can see the last chat message entered.  So I added a call to the scrollToBottom method in the ionViewDidEnter() lifecycle event as follows:

export class ChatPage {
  @ViewChild(Content) content: Content;

  constructor() {
  }

  ionViewDidEnter() {
    this.content.scrollToBottom();
  }
}

Unfortunately, the scroll occasionally did not execute.  It seems to work most of the time but occasionally when you opened the page it would scroll but not all the way to the bottom of the chat content.    I found that this only ever happened when the conversation contained images (photos etc that the users had uploaded as part of the chat).  Occasionally the image loading would interfere with the scroll.  I solved it simply by adding a 300 ms delay before the scrollToBottom() is executed.

I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic but also with other mobile frameworks and technologies.  Thanks for visiting.