How to detect scroll direction in ionic 4 - ionic-framework

Question

I want to hide and show my tab bar on scroll. Wanna hide it when user scrolls down and show it when they scroll up. How to determine the direction in the onScroll method?
Here below my onScroll function:
onScroll($event: CustomEvent<ScrollDetail>) {
if ($event && $event.detail && $event.detail.scrollTop) {
let scrollTop = $event.detail.scrollTop;
console.log($event, scrollTop);
document.querySelector('ion-tab-bar').style.display = 'none';
}
}

Answer 1

I think you just need to enable scroll events (Ionic 4 requires it) on ion-content element and bind ionScroll event to your method + bind your tab visibility to a variable (I used footer for this example):
<ion-content padding [scrollEvents]="true" (ionScroll)="onScroll($event)">
<ion-list>
<ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
I am item # {{ item }}
</ion-item>
</ion-list>
</ion-content>
<ion-footer [hidden]="footerHidden">
<ion-toolbar>Hi, I am footer, I hide on scroll down, I am revealed on scroll up</ion-toolbar>
</ion-footer>
Now your ts file can be something like this:
///
footerHidden: boolean;
constructor(
) {}
onScroll(event) {
// used a couple of "guards" to prevent unnecessary assignments if scrolling in a direction and the var is set already:
if (event.detail.deltaY > 0 && this.footerHidden) return;
if (event.detail.deltaY < 0 && !this.footerHidden) return;
if (event.detail.deltaY > 0) {
console.log("scrolling down, hiding footer...");
this.footerHidden = true;
} else {
console.log("scrolling up, revealing footer...");
this.footerHidden = false;
};
};
///
See demo here:
https://stackblitz.com/edit/ionic-v4-euwnrg
UPDATE FOR TABS:
create new tabs app with ionic (ionic start myTabsApp, then chose tabs starter)
Then create shared service (ionic g, then generate a service) so that your tabs hidden flag boolean was available across many pages as needed:
import { Injectable } from '#angular/core';
#Injectable({ providedIn: 'root' }) export class FoundationService {
public hiddenTabs: boolean;
constructor() { }
}
Then import foundation service into your tab1 and do changes to your template:
<ion-header>
<ion-toolbar>
<ion-title>
Tab One
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding [scrollEvents]="true" (ionScroll)="onScroll($event)">
<ion-list>
<ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
I am item # {{ item }}
</ion-item>
</ion-list>
</ion-content>
Then update your tab1 ts:
import { Component } from '#angular/core'; import { FoundationService } from '../services/foundation.service';
#Component({ selector: 'app-tab1', templateUrl: 'tab1.page.html', styleUrls: ['tab1.page.scss'] }) export class Tab1Page {
constructor(private foundation: FoundationService) {}
onScroll(event) {
// used a couple of "guards" to prevent unnecessary assignments if scrolling in a direction and the var is set already:
if (event.detail.deltaY > 0 && this.foundation.hiddenTabs) return;
if (event.detail.deltaY < 0 && !this.foundation.hiddenTabs) return;
if (event.detail.deltaY > 0) {
console.log("scrolling down, hiding footer...");
this.foundation.hiddenTabs = true;
} else {
console.log("scrolling up, revealing footer...");
this.foundation.hiddenTabs = false;
}; };
}
Now update tabs.ts to import foundation service:
import { Component } from '#angular/core';
import { FoundationService } from '../services/foundation.service';
#Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
constructor(private foundation: FoundationService) {
}
}
And also update template of tabs page to bind the boolean:
<ion-tabs>
<ion-tab-bar slot="bottom" [hidden]="foundation.hiddenTabs">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Then run ionic serve and try it out.
The method I wrote is rather raw and naive so you way want to update / tune logic of what changes in the scrolling event should call for boolean to be false /true;

Answer 2

It's really buggy to use deltaY, here is slightly different approach, but more reliable.
Define variable and store lastScrollTop value, then compare currentScrollTop with lastScrollTop
In this case currentScrollTop = event.detail.scrollTop
HTML
<ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
<!-- Your Structure here -->
</ion-content>
Javascript (v1)
public lastScrollTop = 0;
public isHidden = false;
public handleScroll(event): void {
this.isHidden = this.lastScrollTop < event.detail.scrollTop;
this.lastScrollTop = event.detail.scrollTop;
}
Javascript (v2)
public lastScrollTop = 0;
public handleScroll(event): void {
if(this.lastScrollTop < event.detail.scrollTop) {
console.log("scrolling down")
} else {
console.log("scrolling up")
}
this.lastScrollTop = event.detail.scrollTop;
}