ionic 2 + angular 2 : auto scroll to bottom of list / page / chat

Question

I\'m trying to code a page with two segments \"chat\" and \"content\". I want that one \"chat\" segment the page auto-scroll to the bottom with no effect. The chat is a &l

Answer 1

This is my solution with Ionic CLI 5.4.16 :

In page HTML:

<ion-content #content>

In page .TS:

@ViewChild('content', { static: true }) content: any;



 constructor(){}

  getInformation(){

//Your Code 

..........

//At the end

  **this.content.scrollToBottom();**

  }

Answer 2

Here's how I did it:

chatPage.html

<ion-content #content padding class="chatPage">

  <ion-list no-lines>
    <ion-item *ngFor="let msg of messages" >
      <chat-bubble [message]="msg"></chat-bubble>
    </ion-item>
  </ion-list>

</ion-content>

The important bit in chatPage.html is #content on <ion-content>. I'll use the #content identifier to obtain a reference to <ion-content> in my chatPage.js using the ViewChild.

Now for the actual scrolling logic:

chatPage.js

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

@Component({
  templateUrl: 'build/pages/chatPage/chatPage.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class ChatPage {
  constructor() { 

  }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

Also, whenever my chatPage needs to show another chat message in the list (either a new message is received, or a new message is sent), I'm using the below code to scroll to the new bottom:

setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

---

Update for Typescript

Back when I gave this answer I was working with JavaScript version of Ionic 2 project. Over time I switched to TypeScript but I forgot to update the answer, so, here's a small update for chatPage.js(ts):

chatPage.ts

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

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

Answer 3

This could help someone, I have given similar answer in Ionic forum. This is implemented in Ionic 3.

I used ngAfterViewChecked() to achieve this feature. Following is my code structure -

home.html -

<ion-content padding>
    <div #scrollMe id="messages-container" style="overflow: auto; height: 100%;">
        // All messages elemets. Scroll
    </div>
</ion-content>

home.ts -

import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // method used to enable scrolling
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}

.scrollTop and .scrollHeight are JavaScript properties, see here.