Ionic 2 scrollToBottom issue

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 and Ionic 2 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 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

2 thoughts on “Ionic 2 scrollToBottom issue

  1. Francesco

    Oh my god! It works! I was looking for hours for proper way to scroll to bottom.
    Thanks!

    Could be nice though if it just appear to be on the bottom – instead of scrolling all the way down..

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s