How to scroll to the bottom of the chat page in ionic 5

Question

i am building a chatting mobile app with ionic 5, i want to be able to scroll to the bottom of the chat but its not working, i searched online but the solution i saw wasn't working, it just scrolled a little bit, but not to the end of the chat

Here is my code for the chat.page.html

<ion-header>
....
</ion-header>

<ion-content class="bg">
    <ion-button expand="block" (click)="scrollContent()">Scroll 1</ion-button>
    <div class="chat-container">
        <div *ngFor="let message of messages; let i=index;" class="chat-bubble" [(ngClass)]="message.type">
            <h6>{{ message.text }}</h6>
            <p>{{ message.created }}</p>
        </div>
    </div>
</ion-content>
<ion-footer>
.......
</ion-footer>

Here's the code for the chat.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-chats',
  templateUrl: './chats.page.html',
  styleUrls: ['./chats.page.scss'],
})
export class ChatsPage implements OnInit {

    messages=new Array() 
    @ViewChild(IonContent, { static: false }) content: IonContent;
    constructor(
    ) { }
    
    ngOnInit()  {
        this.messages=[
            { text: "Hey what's up?", type: 'received', created: '14:02' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Want to go to the movies?", type: 'send', created: '14:05' },
            { text: "I'm sorry, I can't", type: 'received', created: '14:15' },
            { text: "but can we go tomorrow?", type: 'received', created: '14:16' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "I'm sorry, I can't", type: 'received', created: '14:15' },
            { text: "but can we go tomorrow?", type: 'received', created: '14:16' },
        ]
    }
    scrollContent() {
        this.content.scrollToBottom(300)    
    }
}

I want it to scroll to the bottom of the div with class="chat-container" when i click the button. Please what am i doing thats not right

Answer 1

try this

scrollToBottomSetTimeOut(){

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