Tracking ion-content scroll

Ionic Framework ionic-v3
1

Hi, I’m trying to track a page scroll.

I’ve read about 20 threads (lot of them were using the old event listeners) but I can’t find where I’m doing wrong.

I’m using tabs template and in one tab I’ve put this code:

@ViewChild(Content)
content: Content;
...
ngAfterViewInit() {
    console.log("After View Init");
    console.log("CONTENT: ", this.content);

    this.content.ionScroll.subscribe(($event) =>  {
        this.scrollAmount = $event.scrollTop;
        console.log("SCROLLING: ", this.scrollAmount);
    });
}

When open that page it logs “After View Init” and this.content object but when I start scrolling nothing is logged.

I also tried using <ion-content (scroll)="onScroll($event)"> but without results. I think that is related with the <div class="scroll-content"> block that is generated by Ionic.

How can I make it works?

2

Ionic 2.3.0?

=> https://github.com/driftyco/ionic/issues/10938

3

Hello!!

I think the event is ionScroll not scroll, check the API docs

Try:

<ion-content (ionScroll)="onScroll($event)">

Edit:

I checked and it works perfectly with (ionScroll)="onScroll($event)"

4

Yes, I am on 2.3.0

I tried now downgrading to 2.2.0 and now it works

Thanks!

1 Like
5

I tried, but it’s a problem with 2.3.0: both (ionScroll) and (scroll) didn’t work.
Now downgrading to 2.2.0 it works with (ionScroll).

Thanks

1 Like
6

For the record, the brave @jjosef found a workaround or solution to use ionScroll with 2.3.0, see