ion-infinite-scroll not working inside ion-scroll

Question

I'm trying to implement load more functionality in the half portion of the page. So I put that code inside the ion-scroll but somehow current implementation is not working i.g. the method is

(ionInfinite)="doInfinite($event)"

is not triggered and loader UI is not rendered. However, the same implementation is working if the content placed in ion-content instead of ion-scroll.

<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
        <ion-list >
          <ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
            <ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
              Item1
            <ion-buttons item-end>
                  <button ion-button clear icon-only color="orange">
                     <ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
                  </button>
                  <button ion-button clear icon-only color="danger">
                     <ion-icon ios="md-close" md="md-close" item-end></ion-icon>
                  </button>
            </ion-buttons>
          </ion-item>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content
              loadingSpinner="bubbles"
              loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
    </ion-scroll>
</ion-content>

Answer 1

ion-Scroll doesn't fire scroll events right now, thus ion-infinite-scroll subscription to scroll events is not fired. You can try to find some workarounds like firing similar event yourself. I just desided to emulate visual similarity in regular ion-content using css for now (not perfect solution).

Link to issue on Ionic Github: https://github.com/ionic-team/ionic/issues/13904 Link to issue on forum: https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3

Answer 2

Sorry for my bad english, but I resolved this problem by using below code:

<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
    <ion-grid>
        <ion-row>
            <ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
                <item-card [item]="item"></item-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-scroll>

And on my component:

@ViewChild('scrollWeb') scrollWeb: Scroll;

Added listener on DOM Element to discover if the scroll arrived in the end as follows:

ngAfterViewInit() {   
    if (this.scrollWeb) {
        this.scrollWeb.addScrollEventListener((ev) => {
            if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
                this.doInfinite(null);
            }
        });
    }
}

In doInfinite function you can omit or show a loader as follows:

if (infiniteScroll !== null) {
     infiniteScroll.complete(); 
}

Answer 3

You need call the $event.complete() method. From the Ionic documentation page of InifniteScroll:

"The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance."

Answer 4

Ionic-version: 3.9.2
I have a similar problem in the component. My solution was:

1. Replace <ion-scroll> with <ion-content>
2. Add overflow: auto; style for <ion-content>
3. Enjoy virtual scrolling