How to bind a function to the onScroll event?

I have a function that I would like to run when ever the user scrolls down the page. How do I bind my function to the scroll event?

I tried: <ion-content (scroll)=“onScroll($event)”>

Where the function is:

onScroll(event) {
console.log(‘scroll event’, event);


import ElementRef

get the element (i use directive in component)

    this.scrollerHandle = this.element.nativeElement.children[0];

set de event:

    var me = this;
    window.addEventListener('resize', function () {
        headerHeight = this.scrollerHandle.clientHeight;
    }, false);

    this.scrollerHandle.addEventListener('scroll', function () {
        if (!me.ticking) {
            window.requestAnimationFrame(function () {
        this.ticking = true;

call back method:


Thanks @realio for pointing me in the right direction. I got it to worked.

The main difference is that I had to use the child of a child to get access to the <scroll-content>


ngAfterViewInit() {
    this.scrollerHandle = this.element.nativeElement.children[1].children[0];
    this.scrollerHandle.addEventListener("scroll", () => {

By the way, is this your tutorial? :

1 Like

I followed this tutorial and found a problem. In iOS platform not detecting scroll momentum. I have no idea how to solve this.

I also have a problem detecting iOS momentum. I need to fire events during the scroll, not at the end. Have you found a solution yet?

Is this problem even possible to solve on other way around… this is kinda important part that is missing???

Take a look at WKWebView. Based on a quick test I did last night, it looks like scroll events continue firing during the momentum portion of a scroll.

1 Like

Our solution for hiding showing scroll to top button that might help you:

ngAfterViewInit() {

 this.content.addScrollListener((event) => {

  // show/hide go-to-top button
  this.showGoTopButton = > 400;