Hello everyone, I hope you all doing well ![:smiley:]( ":smiley:")
,
I have been looking and searching for a good way to hide and show header on ionic 4 project while scrolling.
I have achieved that by the help of others on form and by doing some search, but what I am having issue now is that it is so laggy, like it flickrs and something like that when it hides/shows.
For this i have used a directive.
Here is my ionic info:
Ionic:
Ionic CLI : 5.4.9 (C:\Users\Milot\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.9.1
@angular-devkit/build-angular : 0.803.23
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)
Utility:
cordova-res : 0.8.1 (update available: 0.9.0)
native-run : 0.2.9 (update available: 0.3.0)
System:
Android SDK Tools : 26.1.1 (C:\Users\Milot\AppData\Local\Android\Sdk)
NodeJS : v13.2.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.1
OS : Windows 10
And this is how i have used the directive:
import { Directive, Input, ElementRef, Renderer2, OnInit } from "@angular/core";
import { DomController } from "@ionic/angular";
@Directive({
selector: "[myScrollVanish]"
})
export class ScrollVanishDirective implements OnInit {
@Input("myScrollVanish") scrollArea;
private hidden: boolean = false;
private triggerDistance: number = 1;
constructor(
private element: ElementRef,
private renderer: Renderer2,
private domCtrl: DomController
) {}
ngOnInit() {
this.initStyles();
this.scrollArea.ionScroll.subscribe(scrollEvent => {
let delta = scrollEvent.detail.deltaY;
if (scrollEvent.detail.currentY === 0 && this.hidden) {
this.show();
} else if (!this.hidden && delta > this.triggerDistance) {
this.hide();
} else if (this.hidden && delta < -this.triggerDistance) {
this.show();
}
});
}
initStyles() {
this.domCtrl.write(() => {
this.renderer.setStyle(
this.element.nativeElement,
"transition",
"0.1s linear"
);
this.renderer.setStyle(this.element.nativeElement, "height", "52px");
});
}
hide() {
this.domCtrl.write(() => {
// this.renderer.setStyle(this.element.nativeElement, "min-height", "0px");
this.renderer.setStyle(this.element.nativeElement, "height", "0px");
// this.renderer.setStyle(this.element.nativeElement, "opacity", "0");
// this.renderer.setStyle(this.element.nativeElement, "padding", "0");
});
this.hidden = true;
}
show() {
this.domCtrl.write(() => {
this.renderer.setStyle(this.element.nativeElement, "height", "52px");
// this.renderer.removeStyle(this.element.nativeElement, "opacity");
// this.renderer.removeStyle(this.element.nativeElement, "min-height");
// this.renderer.removeStyle(this.element.nativeElement, "padding");
});
this.hidden = false;
}
}
html file:
<ion-header>
<ion-toolbar [myScrollVanish]="scrollArea">
</ion-toolbar >
</ion-header>
<ion-content #scrollArea scrollEvents="true"> ... </ion-content>
and here is a video of it, first time its with 0.1s linear and second time is with 0.5s linear:
Click here for Stramable Video
i have tried these but with same results:
Link 1
Link 2
Link 3
thank you very much,
All the best,
Milot.
,
- thanks for any help!
