ionic 6 – Chat Screen – Keep scroll to bottom – Dynamic height components

Issue

I have an Angular Ionic 6 app with a chat screen & when it loads up I want the ion-content to be scrolled to the bottom.

I know how to scroll the content to the bottom using this.ionContent.scrollToBottom(); but the problem is some of the messages have to load in dynamic content and have a variable height.

What would be the best way of making sure after all of those messages and components are loaded in THEN it scrolls the chat to the bottom?

Solution

I had this problem a few months ago. Sometimes a lot of messages were loaded, and the scroll didn’t reach all the way down.

I worked it around with this function in my utils.service.ts:

 async goToBottom(content:IonContent, times:number=1){
   for(let i=0; i<times; i++){
     await this.wait(200);
     await content.scrollToBottom(200)    
   }
 }

So I can call it like this:

this.utilsSvc.goToBottom(this.content, 3);

and make sure it always arrives the bottom.

Answered By – Miguel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0