Infinite scroll upward direction ionic 3

How can I use infinite scroll to load more data in reverse direction? I want to load data on scroll up instead of scroll bottom. I’m developing chatting app so i need chat style upward infinite scrolling. thanks,

what do you mean?you mean to say that if msg is send then it should go to upward it right or not?

thanks you reply:
I want when I open chat window, it will loading last message and then when I scroll top, it will appear message old.

  • the same: WhatsApp, zalo, message

I done by “infinite scroll”
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())" threshold=“10px” position=“top”>

-> app.ts [provider]

getMess(id1, id2, numberLimit) {
var user = this.db.collection(‘chats’).doc(this.util.getChatId(id1, id2)).collection(‘chats’);
var firstMess = user.ref
return firstMess.get();
-> chats.ts

doInfinite(): Promise {
return new Promise((resolve) => {
setTimeout(() => {
var userNext = 10;
this.limitMess += userNext;
this.appProvider.getMess(this.user[‘base64’], this.receiver[‘base64’], this.limitMess).then(x => {
var next = this.db.collection(‘chats’).doc(this.util.getChatId(this.user[‘base64’], this.receiver[‘base64’])).collection(‘chats’).ref
next.get().then(a => {
a.forEach(b => {
this.lastVisible =[ - 1];
}, 500);
ionViewWillEnter() {

this.itemsCollection = this.db.collection<any>('chats');
this.itemsCollection.doc(this.util.getChatId(this.user['base64'], this.receiver['base64'])).collection("chats", 
ref => ref.orderBy('date')).snapshotChanges().subscribe(data => {
  this.msgList = [];
  data.forEach(doc => {
    var chat =;
    chat['id'] =;

=> can’t show last message and loading message old orderby(time). can you help me.

so,when you enter in chat window page then in ionViewWillEnter(),you can write this for scroll to bottom.
import { Content } from ‘ionic-angular’;
export class ChatWindowPage {
@ViewChild(‘content’) content: Content;
this.content.scrollTo(0, this.content.getContentDimensions()[“scrollHeight”], 200);
at html side <ion-content #content>
In this way ,you can go to bottom of page.and you can scroll infinite at upward direction.