scrollToBottom intermittently not working


#1

I have been developing a chat application and when I open a chat page to show a current conversation I want the page to automatically scroll to the bottom so the user can see the last chat message entered.

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

  constructor() {
  }

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

Unfortunately the scroll occasionally does not execute (logging shows that the ionViewDidEnter event is always executing but the scroll is not). It seems to work most of the time but occasionally when you open the page it scrolls but not all the way to the bottom). This happens on the device as well as the browser. Anyone know what might be going on?


#2

I’ve narrowed the problem down a little. The scroll only fails on conversations that contain images. Even though the images are loaded and displayed ok, sometimes (when the conversation contains images) the scroll fails.


#3

adding a delay before executing the scroll seems to have fixed it (not tested on the device yet)


#4

It sounds as though you’re scrolling before the page is rendered. Can you use IonViewDidLoad instead?


#5

I tried that but it didn’t work - adding a 300ms delay before the scroll solved the problem though, thanks.


#6

I’ve been facing the same issue when I choose a segment on a page. It scrolls down only around 10% from the top.

segmentChanged()
    {
    if(this.segment === 'abc'){
         
        this.content.scrollToBottom();
       
    
    }
    }

Adding a delay makes it work fine

 setTimeout(()=>{this.content.scrollToBottom();},200);