bug: ion-infinite-scroll on top

Bug Report

Ionic version: [x] 3.x [x] 4.x

Current behavior: Happen the same in V4 All info here --> ionic-team/ionic-v3#831 Almost 1 year with that issue opened

Expected behavior:

Steps to reproduce: HTML :

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
 </ion-header>
 <ion-content >
  <ion-infinite-scroll [position]="top" (ionInfinite)="getMoreMessagesI($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <ion-list>
    <ion-item *ngFor="let message of messages; let i = index" attr.id="{{i}}">
      <p>{{ message.name }}</p>
    </ion-item>
  </ion-list>
 </ion-content>

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent, IonInfiniteScroll } from '@ionic/angular';
@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  @ViewChild(IonInfiniteScroll, { static: true }) infiniteScroll: IonInfiniteScroll;
 @ViewChild(IonContent, { static: true }) content: IonContent;
 
 private messages: any[] = [];
 private delay = (time: number) => new Promise(res => setTimeout(() => res(), time));
 constructor() {}
 async ngOnInit() {
   this.setInitialMessages();
 }
 private async getMoreMessagesI(event) {
   const more = [
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
   ]; 
   await this.delay(2000);
   event.target.complete();
   this.messages.unshift(...more);
 }

 private setInitialMessages() {
   const initial = [
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
   ];
   this.messages.push(...initial);
 }
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.1 (/Users/pc/Desktop/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   NodeJS : v10.16.3 (/Users/pc/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

DEMO https://imgur.com/a/EsRy84Q

[rdlabo]

@spencerdezartsmith @nosTa1337

It also doesn’t hold my scroll position but rather scrolls me to the top.

It will be improved better.

// scroll position before merge new array
const scrollElement = await this.content.getScrollElement();
const scrollAmount = scrollElement.scrollHeight ;

// merge new array.
this.items = newItems.concat(this.items);

await Promise.race([
  new Promise((resolve) => requestAnimationFrame(resolve)),
  new Promise((resolve) => setTimeout(resolve))
]);

// go to scroll position
const toPosition = scrollElement.scrollHeight - scrollAmount;
await this.content.scrollByPoint(0, toPosition, 10);

[spencerdezartsmith]

Any updates on this? I am facing the same issue in Ionic 5. Scroll to top gets stuck and need to scroll down a little to trigger the next scroll. It also doesn’t hold my scroll position but rather scrolls me to the top.