How to add scroll event to <ion-scroll>

Ionic Framework ionic-v3
1

Scroll event is not mentioned in the docs. Is there any way to achieve so?

1 Like
2

hi, i had the same problem .

  1. I went to the doc : https://github.com/driftyco/ionic/blob/master/src/components/scroll/scroll.ts
  2. there is a method ‘addScrollEventListener’ that adds a scroll event listener, and return a function to remove it ( use it when the view is removed )

in order to access it,
just select the ion-scroll through a @ViewChild and call the function addScrollEventListener. :wink:
and don’t forget to remove the scrollEvent listener within the destroy lifecycle hook.

best :wink:

here is an exemple ( don’t forget to import ViewChild from ‘’@angular/core’ :

template : <ion-scroll #scroll> </ion-scroll>
@ViewChild(‘scroll’) ionScroll

scrollEventRemover: any
ngAfterViewInit(){
this.scrollEventRemover = this.ionScroll.addScrollEventListener((event)=>{
// inside the scroll event
})
}

when you’re done with the view call the event remover :
ngOnDestroy(){
this.scrollEventRemover()
}