CODEWITHSUNDEEP
ionic3ion-scrollion-infinite-scroll
pat
pat

Reputation: 1119

Ionic 3 - Infinite scroll with Horizontal scroll

I have used Infinite scroll with "Vertical Scroll" and it works as expected.

On a different page, I have multiple "Horizontal scrolls". I would like to make them infinite scrolls as well. I used the <ion-infinite-scroll> tag for the horizontal scroll, but it does not seem to work as required. I googled around as well but couldnt find much help.

I am pasting my code below. <ion-scroll scrollX="true"> <ion-card *ngFor="let x of y"> ... </ion-card> <ion-infinite-scroll (ionInfinite)="doInfinite($event, y)"> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-scroll>

One thing I noticed is, when i scroll all the way to the bottom of the page, the ionInfinite method gets called on all the horizontal scrolls. So it looks like the vertical infinite scroll is getting triggered instead of the horizontal infinite scroll.

Please let me know if I am missing anything or if there is any specific way that the code needs to be written.

Upvotes: 4

Views: 1308

Answers (1)

Michael Young Mediero
Michael Young Mediero

Reputation: 11

You can't do it with Ionic, but you can do it by yourself:

Template:

<div (scroll)="YOURMETHOD($event)">
    //do something
</div>

Page.ts:

public YOURMETHOD(event:any){
    console.log(event)
}

Ionic:

   Ionic CLI                     : 5.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Upvotes: 1

Related Questions