I have implemented a scroll function event in my HTML file using the following code:
<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>
In my .ts file, I am trying to hide and show a button based on scrolling behavior. The current implementation hides the "Proceed" button when scrolling down, but I want it to also be hidden when scrolling up. It should only become visible when the scroll stops within the ion-content.
public isShown:boolean=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;
}