How to use Infinite Scroll within an ion-card?

Question

I need the InfiniteScroll issue an event while rolling the scroll of card, and not the page.

import { Component, OnInit, ViewChild } from '@angular/core';
import { GrupoService } from 'src/app/services/grupo.service';
import { ActivatedRoute, Router } from '@angular/router';
import { LoadingController, IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-temporadas',
  templateUrl: './temporadas.page.html',
  styleUrls: ['./temporadas.page.scss'],
})

export class TemporadasPage implements OnInit {

  @ViewChild(IonInfiniteScroll) infinite : IonInfiniteScroll

  temporadas      : any = []
  grupoId         : any
  loading         : any
  erro            : boolean 
  erroJogos       : boolean = false
  spin            : boolean = true
  page            : number = 1;
  isAdministrador : boolean = false
  
  constructor(
    private grupoService  : GrupoService,
    private activeRoute   : ActivatedRoute,
    private loadingCtrl   : LoadingController,
    private router        : Router,
  ) { }

  async ngOnInit() {
    if(localStorage.getItem('administrador') == '1')
    {
      this.isAdministrador = true
    }
    
    this.loading = await this.loadingCtrl.create()
    this.loading.present()
    this.grupoId = this.activeRoute.snapshot.params['grupo']
    this.obterTemporadas()
  }

  toggleInfiniteScroll() {
    this.infinite.disabled = !this.infinite.disabled;
  }

  obterTemporadas()
  {
    this.erro = false
    let params =  {
      grupo : this.grupoId
    }
    this.grupoService.obterTemporadas(params).subscribe(
      data => {
        this.temporadas = data
        this.loading.dismiss()

        for(let temporada of this.temporadas){
          let jogosParams = {
            temporada : temporada.id,
            page      : this.page
          }

          this.grupoService.obterJogos(jogosParams).subscribe(
            data => {
              this.spin = false
              temporada.jogos = data
              console.log(data)
              return temporada.jogos.data
            },
            err => {
              this.spin = false
              if(err.error.resultado == false)
              {
                return false
              }
            }
          )
          console.log(temporada)
        }        
      },
      err =>{
        if(err.error.resultado ==  false)
        {
          this.erro = true
        }
        this.loading.dismiss()
        console.log(err)
      }
    )
  }

  /*infiniteJogos(event)
  {
    setTimeout(() => {
      console.log('Done');
      this.page++
      this.obterTemporadas()
      event.target.complete();

      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }*/

  cadastrarTemporada()
  {
    this.router.navigate(['temporada/cadastrar',this.grupoId])

  }
  
  cadastrarJogos(temporada)
  {
    this.router.navigate([this.grupoId,'jogos','cadastrar',temporada])
    
  }

  jogoDetalhes(jogo,temporada)
  {
    this.router.navigate([this.grupoId,temporada,'detalhes-jogos',jogo])
  }

  jogoFinalizadoDetalhes(jogo,temporada)
  {
    this.router.navigate([this.grupoId,temporada,'detalhes-jogo-finalizado',jogo])
  }

}

ion-button {
    //padding-left:50%!important;
    //padding-right:50%!important;
    //align-content: center!important;
    //align-items: center!important;
}

.jogos 
{
    height: 250px;
    overflow: scroll;
}

.jogoFinalizado
{
    background-color: greenyellow;
    color: white;
    font-size: 30px;
}

h2{
    text-align: center;
}
ion-spinner{
    top:50%;
    left:50%;
}

ion-icon{
    text-align: right!important;
    font-size: 40px;
}

<ion-card *ngIf="erro == true">
  <ion-label>Sem temporadas</ion-label>
</ion-card>

<ion-button *ngIf="isAdministrador" (click)="cadastrarTemporada()">(+) Temporada</ion-button>

<div *ngIf="erro == false">
  <ion-card *ngFor="let temporada of temporadas">

    <ion-card-header>
      <ion-card-title>Temporada: {{temporada.nome}}</ion-card-title>
      <ion-card-subtitle>{{temporada.descricao}}</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <ion-button *ngIf="isAdministrador" (click)="cadastrarJogos(temporada.id)">(+) Jogos</ion-button>
      <ion-item *ngIf="!temporada.jogos">
        Não há jogos cadastrados nesta temporada.
      </ion-item>

    </ion-card-content>
    <ion-spinner icon="crescent" class="spinner-royal" *ngIf="spin"></ion-spinner>
  
    <h2 *ngIf="!spin">
      Jogos
    </h2>

    <div *ngIf="temporada.jogos" class="jogos">
   
      <div *ngFor="let jogo of temporada.jogos.data">

        <!-------------------------JOGO Ñ FINALIZADO------------------------------------>
        <ion-card *ngIf="!jogo.hora_final" (click)="jogoDetalhes(jogo.id,jogo.temporada)">
          <ion-card-content>
            <ion-col>
              Dia : {{jogo.data | date: 'dd/MM/yyyy'}}
              <br />
              Hora : {{jogo.hora_inicial}}
            </ion-col>
            <ion-col>
              <ion-icon name="md-add-circle" float-right></ion-icon>
            </ion-col>
          </ion-card-content>
        </ion-card>
        <!-------------------------JOGO FINALIZADO!!!!!!------------------------------------>
        <ion-card class="jogoFinalizado" *ngIf="jogo.hora_final"
          (click)="jogoFinalizadoDetalhes(jogo.id,jogo.temporada)">
          <ion-card-content>
            <ion-col>
              Dia : {{jogo.data | date: 'dd/MM/yyyy'}}
              <br />
              Hora Inicial : {{jogo.hora_inicial}}
              <br>
              Hora Final : {{jogo.hora_final}}
            </ion-col>
            <ion-col>
              <ion-icon name="done-all" float-right></ion-icon>
            </ion-col>
          </ion-card-content>
        </ion-card>

      </div>

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

    </div>

  </ion-card>

</div>

Compilation print :

Answer 1

I researched something about some time ago, and from what I understand, Infinite-scroll needs a scroll to have reference to the "end" of the list.

It would look something like:

<ion-card>
<ion-card-header>
    Título
</ion-card-header>

<ion-card-content>

    <ion-scroll scrollY="true">
      <ion-list *ngFor="let item of items">
         <!-- Conteúdo se repetindo -->
      </ion-list>

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

    </ion-scroll>

</ion-card-content>
</ion-card>