[ionic v4] - ionScroll bug when trying to get event's scrollTop

Ionic Framework
1

Hello,

I have updated ionic 4.0.2 to ionic 4.0.3 and a problem came with this update.
When i try to get the scroll amount through “ev.detail.scrollTop” i always get 0.

So i tried to create a new project to see if the problem was caused by my project, but even in this project i got the same error. So here is the code of the new project, easier to read :

home.page.html :

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content (ionScroll)="scroll($event)" [scrollEvents]="true">
  The world is your oyster.

<!-- scrollable content-->

</ion-content>

home.page.ts :

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage  {

    scroll(ev) {
     console.log('scroll event scrollTop', ev.detail.scrollTop);
     console.log('scroll event detail', ev.detail);
    }
}

And here is what i get on the console.log :

For ev.detail.scrollTop :

0

For ev.detail :

  1. {scrollTop: 0, scrollLeft: 0, type: “scroll”, event: Event, startX: 0, …}

  2. currentX:0

  3. currentY:0

  4. data:undefined

  5. deltaX:0

  6. deltaY:0

  7. event:Event {isTrusted: true, type: “scroll”, target: null, currentTarget: null, eventPhase: 0, …}

  8. isScrolling:true

  9. scrollLeft:0

  10. scrollTop:0

  11. startTimeStamp:3641.8999999987136

  12. startX:0

  13. startY:0

  14. timeStamp:3819.5999999989

  15. type:“scroll”

  16. velocityX:0

  17. velocityY:0

  18. proto:Object

As it is my first post on this forum, i hope i’m enough clear so you can understand my problem.

EDIT : I downgraded to ionic 4.0.2, and all is working great, so it seems to be a bug on the version 4.0.3 only.

2

I just opened an issue regarding the very same subject 30 minutes ago :wink:

1 Like
3

I saw that and just answered it,
thanks :slight_smile:

1 Like
4

Any news to this issue?

5

Too lazy to click the link above?

:wink:

The issue has been marked as solved

7

I couldn’t get it to work. But I see now that it was an error in my code and a slightly different issue.
I was trying to get the scrollTop of a div inside content when scrolling.
Anyway, thanks for replying.

1 Like
8 
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({...})
export class MyPage{
  @ViewChild(IonContent) content: IonContent;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}
1 Like
9

Thanks. It works perfectly!