Could someone help me scrolling in a much better way?

Ionic Framework
1

Hi,
I have an issue with the scrollToBottom method of the ion-content.
I’m trying to develop some kind of chat, with a bottom scrolling when messages are received.
I tried to call the Content.scrollToBottom() method as soon as I push the new message in the chatMsgs (array) but the scroll seems to be called before the view is rendered.

@ViewChild(Content) content: Content;
.
.
.
this.chatMsgs.push(data);
this.content.scrollToBottom();

In fact, the item is added to ion-content but the scrollToBottom method leads to the ‘one-before-last’ message.

Setting a timeout is the only way I found to achieve the scroll to the bottom. Even though the timeout is very short (100 ms), this method seems to be a very dirty hack.

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

Could someone help me scrolling in a much better way ?

Here is my chat-page.html

<ion-header style="header">
  <ion-toolbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-card *ngFor="let msg of chatMsgs">
      <ion-card-header>
        <ion-card-subtitle>{{msg.from}}</ion-card-subtitle>
        <ion-card-title>{{msg.content}}</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-list>
</ion-content>

<ion-footer style="footer">
  <ion-toolbar>
  </ion-toolbar>
</ion-footer>

Here is my config:

ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework               : @ionic/angular 4.0.0-beta.16
@angular-devkit/build-angular : 0.10.6
@angular-devkit/schematics    : 7.0.6
@angular/cli                  : 7.0.6
@ionic/angular-toolkit        : 1.2.0

Thanks in advance,
Antoine

4

Hey, ionic v3 have automatic scroll control available,then why you try new things?.I don’t know may work it,please try it.

5

I’m not sure what you’re talking about.
I looked for the best way on lots of forums but everybody uses the Content.scrollToBottom() method. With me, it works only after setting a timeout.
Thnks