ion-infinite-scroll fires when scrolling up - Ionic

Question

I am using ion-infinite-scroll in my html like this:

<div class ='contentone' #contentone [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let i of items" no-padding no-lines>
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{i.url}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">{{i.username}}</h4><br>
          <h4 class="poststudio">Ed's Studio</h4>
        </div>
        <div class="postprofilelink">
          <div class="book">{{i.title}}<!--</div><div style="display: inline-block">@edbundyhair--></div>
        </div>
      </div>
      <img class="imagepost" src="{{i.url}}">
      <div class='caption'>
        {{i.caption}}
      </div>
      <br>
     </ion-item> 
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data..."
        threshold="1%">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>

My controller code looks like this:

doInfinite(): Promise<any> {
    console.log('Begin async operation');

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.list = this.af.list('/promos', {
        query: {
          orderByKey: true,
          startAt: this.startAtKey,
        }});

        this.list.subscribe(items => { 
          items.forEach(item => {
            console.log(JSON.stringify(item.customMetadata));
            console.log(this.startAtKey + "            " + item.$key);
            if(this.startAtKey == item.$key) {
              //
            }
            else {
              this.startAtKey = item.$key;
              this.items.push(item.customMetadata);
            }

          });

          resolve();              
        })

      }, 500);
    })
  }

One thing that is weird is everything was working fine a little while ago, but to get the infinite-scroll to show up I had to add css like this:

    ion-infinite-scroll {
        position: relative;
        bottom: 30px;
        background-color: white;
    }

The problem is that when I scroll up the doInfinite method fires when it is only supposed to fire when you are scrolling down. I am using the ion-refresher to handle scrolling up. Help is appreciated, thanks.

Answer 1

I faced a similar issue and implemented an workaround as follows:

Imported ViewChild & Content in the class as follows

import { ViewChild } from '@angular/core';
import {Content } from 'ionic-angular';

Then declared Content -

export class YourClass {
  //
  @ViewChild(Content)
  content: Content;

// variables to check scrolling -
private lastScrollTop: number = 0;
private direction: string = "";


ngAfterViewInit() {
    //
    this.content.ionScrollEnd.subscribe((data) => {
      //
      let currentScrollTop = data.scrollTop;
      if(currentScrollTop > this.lastScrollTop){
        this.direction = 'down';
      }else if(currentScrollTop < this.lastScrollTop){
        this.direction = 'up';
      }
      //
      this.lastScrollTop = currentScrollTop;

      //console.log(this.direction);
    })
  }


// and then - 

doInfinite(infiniteScroll) {
   setTimeout(() => {         
      //
      if(this.direction == 'down'){
        // do your job here
      }
      infiniteScroll.complete();

    }, 500);
  }