ionScroll issue in. ionic 4

ankitaM17 · March 6, 2021, 6:47am

Please describe the question in detail and share your code, configuration, and other relevant info.

Hello,

I am facing issue when working with ionScroll on ion-content
ionScroll event fired more than one at a time
any one find solution for this?
here is my implementation
ion-content [scrollEvents]=“true” #content (ionScroll)=“onScroll($event)” (ionScrollEnd)=“onScrollEnd($event)”>

and i called function in ts file

onScroll(event){
console.log(“Event Fires”,event);
}

and getting this result

Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
Event Fires CustomEvent {isTrusted: false, detail: {…}, type: “ionScroll”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}

any one find solution ?
Please let me know if any solution
Thanks in advance

Tommertom · March 6, 2021, 6:51am

IonScroll is supposed to fire with esch scroll action, so for almost any movement.

Arent u just looking for an other event like scroll start? Plse check docs

What is your objective?

ankitaM17 · March 6, 2021, 7:02am

I need scrollTop and startY that is not getting IonScrollStart
I just need to scrolling like instagram reels and that’s why i need scrollTop and startY

Tommertom · March 6, 2021, 7:04am

Ok

As long as u aware then ionScroll behaves correctly (for what I can see), u need to rethink the events you want to tap into

Have u tried ionScrollStart? Console log what it gives u?

IonScroll can be a performance killer hence off by default

ankitaM17 · March 6, 2021, 7:18am

CustomEvent {isTrusted: false, detail: {…}, type: “ionScrollStart”, target: ion-content.md.hydrated, currentTarget: ion-content.md.hydrated, …}
bubbles: true
cancelBubble: false
cancelable: true
composed: true
currentTarget: null
defaultPrevented: false
detail:

1. isScrolling: true
2. __proto__: Object

eventPhase: 0
isTrusted: false
path: (17) [ion-content.md.hydrated, app-home-products.ion-page, slot, document-fragment, ion-router-outlet.hydrated, div.tabs-inner, ion-tabs, app-home.ion-page, slot, document-fragment, ion-router-outlet.hydrated, ion-app.md.ion-page.hydrated, app-root, body, html.plt-android.plt-mobile.plt-mobileweb.md.hydrated, document, Window]
returnValue: true
srcElement: ion-content.md.hydrated
target: ion-content.md.hydrated
timeStamp: 18292.224999999235
type: “ionScrollStart”

It’s gives like this.
It’s gives nothing currentY,startY or anything else

Tommertom · March 6, 2021, 7:36am

Ah, now I see. Thx.

Looking at the source of ion-content, indeed the startY is not emitted. What a bummer…

Then I think one option is to subscribe to the event and take(1) (or first()). And resubscribe at scrollEnd.

I havent tried it, but something like

this.content.ionScroll.pipe(take(1)).subscribe(($event) => {
                this.startY= $event.startY; // or something similar
            });

And toggle scrollEvents in order to improve performance (if needed)

Too bad it isn’t emitting the full details. Will be an easy one for Ionic to add.

Tommertom · March 6, 2021, 7:42am

Submitted a feature request for Ionic

ankitaM17 · March 6, 2021, 7:54am

how much time it will take to update?

Tommertom · March 6, 2021, 8:47am

Cant say. The ionic team needs to agree. So if at all…

Tommertom · March 8, 2021, 5:16pm

Plse check discussion. You should do a capture of the scrollY attributes as per that discussion. Basically grabbing the ion-content.

ankitaM17 · March 19, 2021, 10:45am

I tried this but unfortunately i got only scrollTop using this
const innerEl = await this.content.getScrollElement();
console.log(innerEl.scrollTop)
Don’t got any other property like startY
console.log(innerEl.startY) this gives me undefined