ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.12k stars 13.5k forks source link

ionScroll events not firing on 2.3.0 #10938

Closed joshuamorony closed 7 years ago

joshuamorony commented 7 years ago

Ionic version: (check one with "x") [ ] 1.x [x ] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When adding an event binding for ionScroll on ion-content it is never fired.

Expected behavior:

The Content component should fire scroll events when scrolled.

Steps to reproduce:

The following will work on 2.2.0 but not 2.3.0:

<ion-content (ionScroll)="doSomething()">

doSomething is never fired on 2.3.0.

konrin commented 7 years ago

The same thing if you subscribe to an event from the code - the scrolling event does not fire!

this.content.ionScroll.subscribe((ev: ScrollEvent) => {})

jjosef commented 7 years ago

You need to call this.content.enableScrollListener() in the Component. Docs need update!

peterpeterparker commented 7 years ago

@jjosef mvp of the day, your solution works!

Except the doc which is not up-to-date, it's also "disturbing" that enableScrollListener is annotated as a private method in content.d.ts...

/**
 * @private
 */
enableScrollListener(): void;
jjosef commented 7 years ago

My instincts tell me this is a bug more than anything. Not sure why this method would be required before the listener is enabled. I'm too busy at the moment to look into it and submit a PR, but this was a quick fix..

brandyscarney commented 7 years ago

It seems the code that was called in ngOnInit for content was moved to a function by this commit: https://github.com/driftyco/ionic/commit/7e9bad509255b642f6099366231ad86fe6eaddad#diff-848174518abef5659a16d7dc15e82a62R374

Adding the following in content fixes it:

ngOnInit() {
  this.enableScrollListener();
}

cc @manucorporat

dmastag commented 7 years ago

It is still not working for me on ionic3 using iOS

dmastag commented 7 years ago

Wanted to share that I Got some advise from North McCormick on Slack to use wkwebview for the ion-infinte problem and it is working as a temporary workaround for that issue.

Sadly it is not working for this scroll event issue on a new ionic app i crated from scratch to test this

dmastag commented 7 years ago

@manucorporat I tried this using iPhone SE with and without wkwebview on 2.3.0 and 3.0.0 and 3.1.1 and it is still not working

peterpeterparker commented 7 years ago

If I understand correctly, @dmastag it looks like @manucorporat fixed the scroll for UIWebView 2 days ago there https://github.com/driftyco/ionic/issues/10936

dmastag commented 7 years ago

@peterpeterparker yeahh but on my test it only worked for ion infinite, and the onScroll was still not working

manucorporat commented 7 years ago

@dmastag this is a known limitation of UIWebView, and it is been there forever, the only thing you can do is to enableJSScroll() conditionally, but native scrolling is much smoother. http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

The best chance if you depend on scrolling events is to start using WKWebView, in fact we have plans to deprecate UI very soon.

shmulikmak commented 7 years ago

Ionic does not know "enableScrollListener" in "this.content.enableScrollListener()" he gave me error unkonw method/property..

pawansingewar007 commented 6 years ago

Still not working in ionic 3.9

maheshj11 commented 6 years ago

get the child ref using @ViewChild('scroll') scroll: any; and then use the addScrollEventListener() on scroll to fire whenever the user scrolls if you use this event inside the constructor and the event throws error or doesn't fire try using setTimeout:

setTimeout(() => {
  this.scroll.addScrollEventListener((e) => {
    console.log(e)
  })
}, 1000);
aleksander351 commented 6 years ago

Try with something like this:

import { Renderer2 } from '@angular/core';
...
constructor(private renderer: Renderer2) {}

ngOnInit() {
    this.renderer.listen(this.specialComponent, 'scroll', (event) => {
        // Do something with 'event'
        console.log(this.specialComponent.scrollTop);
    });
}
davidanaya commented 6 years ago

So any idea if this is going to be fixed? I don't get any event fired when using ionScroll like <ion-content (ionScroll)="scrollHandler($handler)">

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.