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

Ionic Framework
1

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.

2

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

1 Like
3

Hey there, the link you provided no longer loads. I am struggling with implementing the infinite scroll with position top only in ios. I basically hit the threshold and kick off my api request. At that point i capture the scroll height and the current scroll top position. Once I have loaded in the new content to the front of my data array I run a function to set the scroll top to the previous position using this logic

const heightDifference = newScrollHeight - oldScrollHeight

ionContent.scrollTop = lastScrollTop + heightDifference

This works fine on chrome/android but on ios the scrollTop I set is back to is always off or the whole thing just freaks out.

Your comment seems pretty close to my issue so I was hoping to check out your demo or just hear about how you might have fixed this.

4

Hi,

I am not sure why but sometimes you have to refresh the Stackblitz page a few times.

Anyway here is the edit link ionic-angular-v5-kcqgwx - StackBlitz see if it helps.

3 Likes
5

Thank you so much! That actually was a great help. Did you face issues with the scroll bounce on ios when hitting the top infinite scroll? I have trouble holding the scroll position on the upwards direction. It wants to the jump to the top of the list!

1 Like
6

yes true i face same issue.
is there any one have fix for this issue?
Thank you

7

Ever come up with a solution? I have the same problem.