Ionic 2 scroll event

Question

I have an ion-scroll component. I'm trying to execute some code during scrolling. In Ionic 1 this was possible using the on-scroll attribute and passing a function.

The documentation is also missing. Is there a built in way in Ionic 2 to detect scrolling, or do I have to fall back on adding my own event handlers using jQuery or window scroll event?

Answer 1

I found a solution here: “On-scroll” not working in

Using the "addScrollEventListener" inside "ngAfterViewChecked".

Answer 2

You can use the addScrollEventListener method of the Scroll component, like so:

this.scroll.addScrollEventListener((event) => {
    console.log(event);
});

Your HTML:

<ion-header>
    <ion-navbar>
        <ion-title>Title</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="no-scroll">
    <ion-scroll></ion-scroll>
</ion-content>

Your Typescript:

import {Component, ViewChild} from '@angular/core';
import {Scroll} from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    @ViewChild(Scroll) scroll: Scroll;

    constructor() {}

    ngAfterViewInit() {
        this.scroll.addScrollEventListener(this.onScroll);
    }

    onScroll(event) {
        console.log(event);
    }
}

Answer 3

I found this solution from here: https://forum.ionicframework.com/t/ionic-2-rc4-addscrolllistener/73145/16?u=kamleshappster

this.content.ionScroll.subscribe(($event) => {
 this.scrollAmount = $event.scrollTop;
});