CODEWITHSUNDEEP
angularionic-frameworkionic2ion-scroll
Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

Event "ionScroll" in ion-scroll of Ionic2

well, I'm want fire ionScroll in directive ion-scroll, but it does not work.

Have idea how I can work with this???

API: https://ionicframework.com/docs/api/components/scroll/Scroll/

Upvotes: 0

Views: 663

Answers (1)

nucklehead
nucklehead

Reputation: 96

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

There is ion-infinite-scroll you could use but it only applies to the ion-content you can use it if it suites you.

However, if you really want to get event from ion-scroll, 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>
...

Upvotes: 1

Related Questions