Ion-infinite-scroll with unwanted infinite scroll events

Ionic Framework
1

Hi, I use ion-infinite-scroll as in the first example on this page

But I have set the position to top.

<ion-content role="feed">
  <ion-infinite-scroll position="top" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingText="Loading more Data..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
   <ion-list>
    <app-data *ngFor="let data of datas" [data]="data"></app-data>
  </ion-list>
</ion-content>

Since I would like to have the scrollbars at the end of the list after inserting the data, I call scrollToBottem.

  scrollToBottom() {

    setTimeout(() => {
      if(this.content !== undefined) {
        this.content.scrollToBottom(300);
      }
    }, 500);

    setTimeout(() => {
      this.initload_ready = true;
    }, 1500);
     
  }

Unfortunately, this call triggers an infinite scroll event! To block this event at the beginning, I have to trick with a variable (initload_ready).

  loadMoreData(event: InfiniteScrollCustomEvent) {
    if (!this.initload_ready) {
      this.completeScrollEvent(event);
      return; 
    }
   [...]
}

I think that with position = top no infinite scroll event should be triggered with a down scrolling. Seems that it triggers an event when there is a movement in the trigger zone without differentiating the direction.

What is also not quite optimal is that there is a position in the trigger zone (PWA on desktop) where infinite scroll events are triggered until “event.target.disabled = true” is called. That’s why I have to limit the number of items and call “event.target.disabled = true” so that not all data records are loaded automatically into the array.

Is there anything in the code that I can do better?

2

Once disabled it is not possible to enable ion-infinite-scroll again? I tried to enable it with a boolean variable (infinite_scroll_disabled=false) when reentering the view with data from the beginning, but it stays disabled.

<ion-infinite-scroll position="top" [disabled]="infinite_scroll_disabled" (ionInfinite)="loadMoreData($event)">

So I have to keep it enabled even when there is no more data. But sometimes you get infinite “infinite scroll events” if you hit a certain position in the trigger zone! Each infinite scroll event tries to request data from my server.

ion-infinite-scroll urgently needs to be improved.

3

Hi, I decided to use an easy solution

<ion-content role="feed" [scrollEvents]="true" (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)" (ionScrollEnd)="logScrollEnd($event)">

  logScrolling(event: any) {
    this.scroll_top_position = event.detail.scrollTop;
  }

  logScrollEnd(event: any) {
    if(!this.end_of_data && this.scroll_top_position < this.platform.height()) {
      this.loadMoreData();
    }
  }

There is a hint in the ion-content docu that casting $event to $any is a temporary fix for the bug bug: Angular - Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<XXX>'. · Issue #24245 · ionic-team/ionic-framework · GitHub. At this time it works.
So, no bubbles for me :slight_smile:

4

Glad you figured out a workaround! I am not sure what is going on in your case, but I know I tried infinite scroll with a position of top earlier this year and there were some weird issues with it. I ended up creating my own logic using IntersectionObserver.

2 Likes
5

I just updated to Ionic 7 from Ionic 6 and i started having this same issue, can’t re-enable the infinite scroll by setting

.disabled = false;

This broke my app as once it reached the end of my products list, it wont ever work again. I got some filters that the user can apply do the list and when the list updates I only get the fist batch of products and the infinite scroll never works again.

I opened a bug issue for it here: bug: ion-infinite-scroll can't be re-enabled after updating to Ionic 7 · Issue #29087 · ionic-team/ionic-framework · GitHub