How to bind a function to the onScroll event?

Ionic Framework ionic-v3
1

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);
}

Thanks

2

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 () {
                me.updateElasticHeader();
            });
        }
        this.ticking = true;
    });

call back method:

    updateElasticHeader(){
    }
3

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>

Example:

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

By the way, is this your tutorial? : http://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/

1 Like
4

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

5

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?

6

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

7

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
8

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 = event.target.scrollTop > 400;

 });

}