Ionic 2 - ion-scroll fire event on scroll bottom

Question

I have a page where I have a section which is scrollable. However I am not able to implement infinite scroll function inside the ion-scroll section. I know infinite-scroll applies on ion-content but how can I fire an event when the user scroll downs in an ion-scroll section.

<ion-content class="main-view">
        <div class="overlay" tappable (click)="dismiss()">
        </div>
        <div (click)="CloseScreen()">
            <ion-icon name="close" tappable class="close-modal"></ion-icon>
        </div>
        <div>
            <div class="modal_content">   
                <ion-scroll scrollY="true" style="height:300px">
                    <ion-spinner class="loading-center" *ngIf="loadingCustomers"></ion-spinner>
                    <div class="customer-items">
                        <ion-item *ngFor="let customer of customersView.paginatedCustomers" tappable (click)="SelectCustomer(customer)">
                                <h6>
                                    {{customer.BusinessName}}
                                </h6>
                        </ion-item>
                    </div>
                    <ion-infinite-scroll (ionInfinite)="LoadMoreCustomers($event)"> // NOT FIRING!
                        <ion-infinite-scroll-content></ion-infinite-scroll-content>
                    </ion-infinite-scroll>
                </ion-scroll>
            ....OTHER STUFF
            </div>

        </div>
    </ion-content>

score 0 · Answer 1 · answered Jul 08 '18 at 21:23

I will post this in case you or someone else is still looking for an answer.

Like you said ion-infinite-scroll would only applies to the ion-content even when placed inside an ion-scroll. So you could see it firing if you add some margin to your ion-scoll and try to scroll the page itself.

However, for your case, you may want to try something like this: https://stackoverflow.com/a/42176764/4084776

If you want to check when you reach the bottom of the scroll you could add a dummy element and check if it is near the bottom of the scroll. See the example below.

  ...
  @ViewChild(Scroll) ionScroll: Scroll;
  @ViewChild("endOfScroll") endOfScroll: ElementRef;
  updating: Boolean = false;
  private threshold: number = 0.01; //1% This is similar to ion-infinite-scroll threshold 
  ...
  ionViewDidLoad() { 
      this.ionScroll.addScrollEventListener(this.scrollHandler.bind(this));
  }
  ...
  scrollHandler(evenman){
    let endOfScroll = this.endOfScroll.nativeElement.getBoundingClientRect();
    let ionScroll = this.ionScroll._scrollContent.nativeElement.getBoundingClientRect();
    let clearance = 1 - ionScroll.bottom/endOfScroll.bottom;
    if(clearance <= this.threshold){
      this.updating = true;
      // DO your work here
      console.log(JSON.stringify({fen: endOfScroll.bottom, lis: ionScroll.bottom}));
      this.updating = false;

    }
  }
...

...
      <ion-scroll scrollY="true">
        <ion-list>
          <ion-item-sliding *ngFor="let machann of lisMachann.lisMachann  let endeks = index" [class.active]="endeks == endeksKlik">
            <ion-item (click)="ouveFenet(endeks)">
            ...
            </ion-item>
            <ion-item-options side="left">
            ...
            </ion-item-options>
          </ion-item-sliding>
          <ion-item *ngIf="updating">
            <ion-spinner class="loading-center"></ion-spinner>
          </ion-item>
        </ion-list>
        <div #endOfScroll></div>
      </ion-scroll>
...

Ionic 2 - ion-scroll fire event on scroll bottom

1 Answers1