Ionic5: Loading items using ion-infinite-scroll position="top" is not smooth

Hi,

I need some help with upward direction infinite-scroll feature.

I have a vertical-scrollable calendar UI implemented using two ion-infinite-scroll components for handling both directions of scrolling to load data to the top and bottom of the list.

Swyping up (scrolling down) loads future dates to the calendar. Swyping down (scrolling up) loads past dates to the calendar.

The component HTML is something like this:

<ion-infinite-scroll threshold="0px" position="top" (ionInfinite)="loadData($event, 'top')">
    <ion-infinite-scroll-content loadingSpinner="dots" loadingText=""></ion-infinite-scroll-content>
</ion-infinite-scroll>

<ion-grid *ngFor="let row of calendarEvents">
   <ion-row>
      <ion-col size="2">
         <strong>{{ row.date }}</strong>
      </ion-col>
      <ion-col size="10" class="event-title">
         <div *ngFor="let event of row.events">
            {{ event.title }}
         </div>
      </ion-col>
   <ion-row>
</ion-grid>

<ion-infinite-scroll threshold="50px" position="bottom" (ionInfinite)="loadData($event, 'bottom')">
    <ion-infinite-scroll-content loadingSpinner="dots" loadingText=""></ion-infinite-scroll-content>
</ion-infinite-scroll>

Scrolling down and appending more items to the bottom of the list is all OK. However, scrolling up and prepending more items to the top of the list doesn’t produce a smooth result. FYI, to prepend items to the calendarEvents array, I am using Array.concat() method, which is something like this:

this.calendarEvents = olderDateEventsArray.concat(this.calendarEvents);

So the issue is, when for example, 10 new elements are added to the top of the array, one of these issues happen randomly:

  1. The page scroll position jumps to the most top of the page thus triggering another top infinite-scroll.
  2. Or the page scroll position jumps to the top by around 50 to 100px

Just to clarify, what I am expecting to see is a seamless interaction of top infinite scroll. Meaning when the user scrolls to the top, the ion-infinite-scroll-content loading indicator appears, then the new elements are added to the top of the list but the page scroll position remains and there’s no jumping effect at all.

I would love to hear your input about making this work.

Thank you in advance.

I have fixed this by adding some conditional checks on <ion-infinite-scroll> and changed how async data is loaded.

In case someone is interested to see a simple working demo of this feature please check out this StackBlitz I have created.

https://ionic-angular-v5-kcqgwx.stackblitz.io