Unable to detect scroll in ion-router-outlet


My requirement is i wants to hide header when user does scrolling inside page.
so what i thought is ill add my header in app.component.html and ill detect the scrolling and ill hide it but i am unable to.


  <ion-content [scrollEvents]="true" (ionScroll)="scrolling($event)">


export class AppComponent {

    @ViewChild(IonContent) content: IonContent;
    @HostListener('window:scroll', ['$event'])
    async scrolling(event: any) {
        console.log("-----scrolling detected--------");
        //Do code

can someone help with me where i am making mistake ?

Thank you in advance !


Managed to fix this by detecting ionScroll insted of window scroll,

@HostListener('ionScroll', ['$event'])
  scrolling($event: any) {
    const getScrollVal = $event;
    let scrollElement = getScrollVal.detail;

Might help someone 🙂

Answered By – Krunal Lathia

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published