Scrolling event in ion-content

[btsiders]

I’ve been trying to add an event to watch scrolling on an ion-content. Over the course of the betas, it looks like this was possible with addScrollEventListener(handler) in beta 0, onScrollEnd(callback) in beta 1, and onScrollElementTransitionEnd in beta 2 through 4. None of those types of options are listed in the api docs for beta 5 on up.

Is there a recommended way to do this in beta 9? I tried making my own scroll-tracking directive that attached to the ion-content, but the scroll actually happens in the scroll-content child of the ion-content, so I couldn’t get the scroll event. I could get a click event this way, so it was very close.

I saw @vandelay mention using addScrollListener instead of addScrollEventListener, but that was in January…

[wilsonglasser]

You can use addScrollListener or onScrollEnd

import {Component, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
@Component({
    templateUrl: '..'
})
export class ProjectPage {
    @ViewChild(Content)
    content:Content;

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

    ngAfterViewInit() {
        this.content.addScrollListener(this.onPageScroll);
    }

}

[btsiders]

Cool! Yeah, that works for me. I did have that in the list of things I tried, but I think something in my packages wasn’t up to date. Thanks for the reply!

[btsiders]

It’s been a while since I played with Angular, so I have a question that should be simple to answer…

In onPageScroll, this is now the scroll content element and not the ProjectPage component. How do I access the ProjectPage component from there?

[wilsonglasser]

@wilsonglasser

ngAfterViewInit() {
this.content.addScrollListener(this.onPageScroll);
}

I had the same problem, I solve like this:

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

       });
}

[dmastag]

Mate, You are a life saver!

[btsiders]

Anyone tested this kind of thing in iOS? Everything seems great for me in Chrome on the desktop: smooth scrolling, good framerates, nice transitions. But checking it out in Ionic View on the iPad doesn’t look so nice. At least the scrolling is smooth now, but the animations don’t start until the scroll is done. I’m not sure yet if this is just because I’m in Ionic View or if having a scroll listener is going to be bad in an iOS app. Will be compiling the XCode on a mac soon, I guess.

[Sebastianor]

Is there any way to add this listener on<ion-scroll> ?

[technotip]

I’m getting following error
Property ‘addScrollListener’ does not exist on type ‘Content’.

[der_z]

try using:

this.content.ionScroll.subscribe(–your function—);

[Mo_Webdeveloper]

Hello, I tried you subscribe and it worked, but variable is not changing, here is my code

  this.content.ionScrollEnd.subscribe((data)=>{
if(data['scrollTop']>0){
  this.showbutton="MOhammad";
}    

and this is the button

  <button ion-button (click)="scrollToTop()" fab fab-bottom fab-right fab-fixed  *ngIf="showButton" class="topArrow"><ion-icon name="arrow-up"></ion-icon></button>

button is not appearing !

[der_z]

I am pretty sure the variable is changing.
It is maby a problem with your button.

Make sure your button is displayed if you dont use *ngIf

if not try this:

<ion-fab *ngIf="showButton">
  <button ion-fab>Button</button>
</ion-fab>

P.S. : Why are you using string and null?
true and false is the proper way I think.

[saravananm]

Hi,
I am also facing the same issue.
The variable is not updated in the view.

rc.2 => addScrollListener callback was working fine, after updating to rc.4 , ionScroll event is not updating the variable.

[der_z]

Ok, i see the problem.
You can trigger the change detection with the following steps:

import ChangeDetectorRef

import {ChangeDetectorRef} from ‘@angular/core’;

inject it into your component:

constructor(private changeDetectorRef: ChangeDetectorRef) {
}

3. call the following fuction after you change the variable

this.changeDetectorRef.detectChanges();

[saravananm]

Thanks. After adding ChangeDetectorRef, Its working fine

[wodkamichi]

in 2.3 at least the scroll listener must be enabled manually:

@ViewChild('list') content: Content;

ionViewDidLoad(): void {
    this.content.ionScroll.enableScrollListener();
    this.content.ionScrollEnd.subscribe((scroll) => {
        console.log('user scrolled', scroll);
    });
}

[studioMob]

@wodkamichi

this.content.ionScroll.enableScrollListener();

This is what worked for me with Ionic 3.1.1:

In component page:

import { Content} from 'ionic-angular'

export class Questions {
@ViewChild(Content) content: Content;
...
  constructor(...){
}
ngAfterViewInit() {
    this.content.ionScroll.subscribe((event)=>{
      console.log('scrolling ', event);
    });
  }

in the HTML portion:

<ion-content has-header="true" scroll="false" >
     <ion-scroll scrollX="true" scrollY="false" style="width: 100%" scrollbar-x="false" scrollbar-y="false" zoom="true" (ionScroll)="onScroll('head','list')">
</code>

and another scroll area in same content as follow:

 <ion-scroll scrollX="true" scrollY="true" style="height: 100%" scrollbar-y="false" zoom="true" (ionScroll)="onScroll('list','head')">

And now I can see the output in console:

scrolling  Object {timeStamp: 356089.54000000004, scrollTop: 20, scrollLeft: 0, scrollHeight: 810, scrollWidth: 413…}

But it only triggers the event on vertical scrolling, the horizontal scrolling doesn’t trigger the event.

Any idea, why?

[kamleshappster]

Fine example here:

Ionic 2 rc4 addScrollListener

I’m not sure if this helps, but it worked fine in my app: this.content.ionScroll.subscribe(($event) => { this.scrollAmount = $event.scrollTop; });

[Marco_Chavez]

Thank you!! i needed this solution.

[nelsson]

On your page, with ion-content,you can use this wat:

<ion-content [scrollEvents]=“true” (ionScroll)=“handleScroll($event)”>

public handleScroll(event): void {

if( event.detail.scrollTop) > 80 {
    ... action/function
}
if( event.detail.scrollTop) < 80 {
    ... action/function
} 

}
working in ionic, 5 and 6.