how to auto hide a button when the ion-content is scrolling and show when scroll stops

Question

This is my HTML file where I have used scroll function event.

<ion-content (ionScroll)="scrollFunction($event)">
    <ion-card *ngFor="let product of products" no-padding>
    <ion-item class="bigclass">
     <ion-thumbnail item-height="100px" item-start>
       <img-loader *ngIf="product.images" src="{{product.images[0].src}}" useImg></img-loader>
     </ion-thumbnail>
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="loadMoreProducts($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll> 
</ion-content>
<ion-footer>
    <button class="proceed" *ngIf="isShown" ion-button full (click)="proceedPayment()">Proceed</button>
</ion-footer>    

this is my .ts file. It is hiding the button on scroll down event but not showing. I want it to work when I scroll up or down the "Proceed" button. It should hide and when the scroll of ion-content stops then the button should be visible.

public isShown:bolean=false;
constructor(public navCtrl:NavController){
    this.WooCommerce.getAsync('products?
      consumer_key=ck&consumer_secret=cs').then((result) => {
      console.log(JSON.parse(result.toJSON().body));
      this.products = JSON.parse(result.toJSON().body);
      console.log(this.products);
      this.products.forEach(product => { product.quantity = 1, 
      product.disabled=false;});
      return JSON.parse(result.toJSON().body);         
    }, (err) => {
      console.log(err)  
    })
}

public scrollFunction = (event: any) => {
    let dimensions = this.content.getContentDimensions(); 
    let bottomPosition = dimensions.contentHeight + dimensions.scrollTop; 
    let screenSize = dimensions.scrollHeight;
    this.isShown = screenSize - bottomPosition <= 10 ? true : false;
}

Answer 1

You can bind following method on ion-content

• ionScrollStart

• ionScrollEnd

  <ion-content (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollStart($event)

and handle this event by updating isShown

  scrollStart(event) {
     this.isShown = false;
   }

  scrollStop(event) {
     this.isShown = true;
  }