Ionic 5: scroll horizontally with infinite scroll not work

Question

In ionic 5, angular and capacitor, I want scroll horizontally with infinite scroll who call loadMore function and loadMore is called only one time.

This is my HTML code :

<ion-row class="PostContent">

            <ion-content class="fileRow" *ngIf="listCmtFichiers.length !== 0" scrollX="true" scrollY="false">
                <ion-list class="horizontal-list">
                  <app-fichier *ngFor="let cmtFichier of listCmtFichiers; let i = index"
                    [indexOfFichier]="i" [comment]="cmtFichier" [image]="cmtFichier.image" [filedoc]="cmtFichier.fileDoc" [downloaded]="cmtFichier.downloaded" [inPost]="true">
                  </app-fichier>

                  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
                    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
                  </ion-infinite-scroll>
                </ion-list>
              
              </ion-content>
        </ion-row>

.

This is my CSS code :

  .PostContent {
    margin-left: 50px;
    margin-right: 10px;
  }
  
  .fileRow {
    height: 90px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .horizontal-list {
    display: flex;
    flex-wrap: nowrap;
  }

and this is my TypeScript code

  loadMore(event){
  
    if(isDevMode())
        console.log(' Load more before  X ' + this.X);
   this.X++;
    if(isDevMode())
        console.log('Load more after X ' + this.X);
        ((async () => {
          
          this.listCmtFichiers.push(... await this.commentManager.getArrayCommentsFiles(this.X,this.post.id));

          event.target.complete();
       
        })()).catch(
          err => console.log("error ngOnInit Post component wall async "+JSON.stringify(err))
        );

 }

css ' .PostContent { margin-left: 50px; margin-right: 10px; } .fileRow{ height : 90px; width : 100%; display: flex; flex-direction: row; align-items: center; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } ' — Réda Youssoufi, Jun 23 '23 at 15:29
typescript 'checkScroll(event: any) { if(isDevMode()) console.log(' checkScroll X ' + this.X); const element = event.target; if (element.scrollLeft + element.offsetWidth >= element.scrollWidth) { // Load more content here dynamically this.loadMore(event); } }' — Réda Youssoufi, Jun 23 '23 at 15:32

Ionic 5: scroll horizontally with infinite scroll not work

0 Answers0