"On-scroll" not working in <ion-content>

I am trying to use the “on-scroll” feature of “ion-content”. “on-scoll” is not working.

Page.html
<ion-content on-scroll="onPageScroll()">
</ion-content>

Page.ts
private onPageScroll(): void {
    console.log("testing this");
}

I serve this to chrome. When i scroll the page, nothing happens. Nothing is printed to console.

What am i doing wrong?

Thanks

The current way to do it is like this:

HTML:

<ion-content id="my-content">

JS:

// Need to wait until the component has been initialized
ngAfterViewInit() {
 // Here 'my-content' is the ID of my ion-content
 this.content = this.app.getComponent('my-content');
 this.content.addScrollEventListener(this.onPageScroll);
}

onPageScroll() {
  console.log('They see me scrolling...');
}

Where did you see an on-scroll attribute?

3 Likes

Thanks Brandy, i actually just saw that on the Content documentation. Implemented it already and came back here to give the answer.

@brandyshea, what is the datatype of the “this.content”? I’m using typescript, and I get an error:
app.bundle.js:431 Uncaught (in promise) TypeError: this.content.addScrollEventListener is not a function(…)

use addScrollListener instead of addScrollEventListener

How to get current scrollTop value with this solution?

ANSWER:

onPageScroll(event) {
  console.log(event.target.scrollTop);
}

Thanks for the hint @brandyshea. I have a problem detecting iOS momentum. I need to fire events during the scroll (user removes the finger, but momentum is still scrolling). Event fires at the end of momentum. Do you have any solution for this? Thank you

How but adding a delay on the callback?

Hi filipsuk!
Have you found the solution for this?
I have to track each scrolled pixel but this momentum thing is killing me.

any luck??? i need help too

@rafaelbuiu @maith123 Unfortunately, I don’t have a solution yet :confused: you can however try this How to bind a function to the onScroll event?