CODEWITHSUNDEEP
angularionic-frameworkionic2angular7
Jeremy
Jeremy

Reputation: 3809

How to detect scroll using Ionic 2+ and Angular 2+?

Is it possible to detect when the window is scrolled?

I have tried adding HostListener:

@HostListener("window:scroll", [])
onScroll() {
   console.log('scroll');
}

And I have tried using Renderer2:

this.renderer.listen(
   'window',
   'scroll',
   (evt) => {
      console.log('scroll');
   }
);

Neither work.

Upvotes: 1

Views: 937

Answers (2)

Gabriel Costa
Gabriel Costa

Reputation: 41

in your html file add this

<ion-content [scrollEvents]="true"></ion-content>

in your your .ts file add this

@HostListener('ionScroll', ['$event']) onScroll(event){
    console.log(event.detail.scrollTop)
    console.log('im scrolling')
}

Upvotes: 2

Ganesh
Ganesh

Reputation: 6016

you can detect the scroll with below code, just as your first code snippet..

 @HostListener('window:scroll')
 onWindowScroll():void {
   let isScrolled = window.scrollY > this.heightToCompare;
   if (isScrolled !== false) {
      //  do what you want  
   } 
 }

Upvotes: 0

Related Questions