ion-infinite-scroll inside ion-list

Question

I am trying to implement ion-infinite-scroll in my ionic 3 application. i need to implement it inside a ion-list. i made my scroll-content overflow:hidden and make ion-list overflow-y: scroll.

My HTML Code:

<ion-content fullscreen padding>
<ion-list>
    <ion-item *ngFor="let passanger of passangers" (click) = "gotoPassangerDetails(passanger.bookingNo)">
        <div class = "row">
            <div class = "col">{{passanger.lastName}}</div>
            <div class = "col">{{passanger.firstName}}</div>
        </div>
    </ion-item>
    <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)" infinite-scroll-parent="true">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top" ></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-list>

My CSS

page-customer-list {
.scroll-content {;
    height: -webkit-fill-available;
    overflow: hidden;
}

ion-content{
    .row{
        .col.center{
            text-align: center;
        }
        font-size: 14px;
    }

    ion-list{
        overflow-y: scroll;
        height: 75%;
    }
}}

I am not able to get the trigger on doInfinite. if i am removing overflow:hidden in scroll -content it is working. but my whole page is scrolling. i need to scroll only the content inside ion-list.

Shubhendra Singh Shubhendra Singh · Accepted Answer · 2017-10-26T11:49:34

Wrap your ion-list with ion-scroll if you only want to make your list scroll. To make your list scroll vertically wrap your list inside:-

<ion-scroll scrollY="true">
</ion-scroll>

Check below link for more info:-

https://ionicframework.com/docs/api/components/scroll/Scroll/

Edit:- Try below code

<ion-content padding>
<ion-scroll scrollY="true">
  <ion-list>
    <ion-item *ngFor="let passanger of passangers" (click)="gotoPassangerDetails(passanger.bookingNo)">
      <div class="row">
        <div class="col">{{passanger.lastName}}</div>
        <div class="col">{{passanger.firstName}}</div>
      </div>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-scroll>
</ion-content>

Also remove all code from your CSS. It's not necessary.

Check below link for official infinite-scroll sample:-

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

ion-infinite-scroll inside ion-list

1 Answers