Bug Report

Ionic version:

[x] 5.x

Current behavior:

When scrolled to top of the page or even before getting to the top, the ionInfinite event should be called. But when reaching to the top, it does not call the ionInfinite event. Problem I’m facing is, the scroll does not work after i reach to top of page. I’m expecting the data to be added whenever I’m reaching the top of the screen. However, it works when I scroll down a little bit and then slightly scroll up, the data is being called and gets added to array.

Expected behavior:

I expect ionInfinite event to be called whenever I reach top of the page with postion="top" on ion-infinite-scroll like how it works flawlessly with postion="bottom"

Steps to reproduce:

1. Add ion-infinite-scroll element with postion="top" attribute to your ion-content
2. Try to scroll to the top, it won’t scroll once it reaches top, though I have data incremented to the array.
3. You will need to scroll down a little bit in order for infinite scroll to work and then the data loads.

Related code:

Here’s the repository for full code

HTML

<ion-content [scrollEvents]="true" (ionScroll)="logScrolling($event)">

  <ion-list>
     <ion-item *ngFor="let item of items">
         <ion-label>{{item.name}}</ion-label>
     </ion-item>
  </ion-list>

  <ion-infinite-scroll threshold="10%" postion="top" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

TS

  @ViewChild(IonInfiniteScroll, { static: false })
  infiniteScroll: IonInfiniteScroll;
  @ViewChild(IonContent, { static: false }) content: IonContent;

  ...

  loadData(event) {
    setTimeout(() => {
      this.getNewData();
      event.target.complete();
    }, 500);
  }

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.4.0 (/Users/pavanchilukuri/.nvm/versions/node/v10.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.24
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.18.1 (/Users/pavanchilukuri/.nvm/versions/node/v10.18.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina
   Xcode  : Xcode 11.4.1 Build version 11E503a