Ionic 4 infinite scroll list inside a card

Hi all, I would like to insert a “ion-list” inside a card (up to here without problems) and to implement “infinite-scroll” (or “virtual scrolling”) but neither “ion-infinite-scroll” nor “ion-virtual-scroll” works because both of these works because both of these are hooked at the end of “ion-content” and they do not catch the end-scrolling event of the card content. So my list doesn’t grow automatically.
I tried to put “ion-infinite-scroll” inside or outside “ion-card” but both solution does not work.

Have you got any ideas?


<ion-card class="prova_scroll">
    <ion-card-subtitle>Is sospeso</ion-card-subtitle>
  <ion-card-content class="prova_scroll2">  

      <ion-item-sliding *ngFor="let item of dataList">
        <ion-item-options side="start">
          <ion-item-option color="danger" expandable>
        <ion-item-options side="end">
          <ion-item-option color="tertiary" expandable>
  <ion-infinite-scroll threshold="10px" (ionInfinite)="loadData($event)">
          loadingText="Loading more data...">



@ViewChild(IonInfiniteScroll, {static: false}) infiniteScroll: IonInfiniteScroll;
constructor() {
this.dataList = [ ];
for (let i = 0; i < 7; i++) {
this.dataList.push("Item number "+this.dataList.length);

loadData(event) {
setTimeout(() => {
for (let i = 0; i < 7; i++) {
this.dataList.push("Item number "+this.dataList.length);

  if (this.dataList.length == 1000) { = true;
}, 500);


toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;


max-height: 50%;
display: flex;
flex-direction: column;

overflow-x: hidden;
overflow-y: auto;
max-height: 50%;

I’m currently having the same problem here, have you managed to fix it?