Ionic Infinite Scroll position top very buggy in ios

[yaozuwang]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When i infinite scroll up, it infinite scroll many times if the user scrolls too fast upwards. If i disable infinite scroll, the ion-scroll-content will be set the enabled instead of disabled and this leaves a margin of height 84px.

Expected behavior:

Infinite scroll up should not executes many times regardless of how fast the user is scrolling. it shouldn't leave a enabled state after enabled is false.

Steps to reproduce:

Related code:

https://github.com/yaozuwang/InfiniteScroll-Test

  <ion-infinite-scroll position="top" threshold="1%" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\Admin\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.2 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.7.0
    npm  : 3.10.3
    OS   : Windows 10

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[yaozuwang]

Infnite scrolling many times issue happens on IOS, i haven't test this on android yet. But enabled/disabled state issue happens in a browser too, i'll create a repo to demonstrate the problem. There's another similar issue #10889 , it was marked as closed but i don't see a fix?

[yaozuwang]

Here i just added a repo to demonstrate the problem, what you have to do is infinite scroll up until state is disabled, now just resize the browser a little bit and the state will change to enabled but you won't be able to infinite scroll, this leaves a margin of 84px on the top.

Now with IOS, it just happens by itself. Either way, when you resize the browser, the state shouldn't be enabled, and i think this is related to the problem i face on IOS, maybe my content in IOS "changes" which is triggers it.

[kensodemann]

Can you please link the repo here?

[yaozuwang]

@kensodemann Yea, sorry, i linked it in the original answer https://github.com/yaozuwang/InfiniteScroll-Test

[zhouyu1993]

I face the same problem, I just set default options or set the threshold, I find the scrollFun works not at the threshold。

<ion-infinite-scroll (ionInfinite)="scrollFun($event)">
    <ion-list>
      <ion-item *ngFor="let value of list">
        {{value}}
      </ion-item>
    </ion-list>
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="loading..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

async scrollFun (infiniteScroll) {
    if (this.curpage > 0 && !this.loading) {
      this.loading = true
      await this.getSearch()
      this.loading = false
      infiniteScroll.complete()
    } else {
      infiniteScroll.enable(false)
    }
  }

[yaozuwang]

I know this is still an open issue, but not sure if there's any progress regrarding this?

[yaozuwang]

So no update still...?? How does everyone get chatting app working without this working properly?

[manuelnaturalcycles]

i think ionic team is focusing on stencil and virtual scroll, infinite scroll and the such have been pretty much abandoned. not even the refresher works like it did in ionic 1.

[dimitri320]

Virtual scroll is a performance enhancement, not a substitute for infinite scroll. I've got 1000's of items to load, virtual scroll would crash the app, even if it didn't render the whole list. We still need Infinite Scroll to work properly.

[grayboy]

how can fix this issues

[davidst2017]

Hi guys,

Any updates here??? I'm right now facing the same problem. Did anyone come up with a workaround for that?

[jayordway]

I have the same problem with infinite scroll firing many times when position="top"

[Bengejd]

So i've narrowed down the issue, but I'm not entirely sure how to fix it at the moment. I'll update with any answers that I find.

Basically what is happening with infinite scroll with position set to 'top', is that when you scroll to the top of the page, your current scroll position is the top of the screen. When you receive new data from the infinite scroll, the position stays at the top, instead of the last known position, prior to the infinite scroll event. So then it fires again, and again, and again, until you're out of data for the scroll to happen.

So all that really needs to happen, is it needs to save and stay at the current position in the scroll view, after it loads the data.

[Bengejd]

So I haven't come up with a pretty solution, but one that IS working for now, is the following.

Add a (ionScroll) function in your content template.

<ion-content (ionScroll)="onScroll($event)"></ion-content>

Then have a function in your component.ts that sets a variable called scrollDirection based on the scroll Y direction.

 onScroll($event) {
    return this.scrollDirection = $event.directionY;
  }

Then in your doInfinite() function, check to see what the direction this.scrollDirection is.

doInfinite(infiniteScroll) {
    if(this.scrollDirection == 'up') {
      this.scrollDirection = 'down';
      this.page.more()
      .then(() => {
        setTimeout(() => {
          infiniteScroll.complete();
        }, 500) });
    } else {
      infiniteScroll.complete();
    }
  }

And then set it to anything, I just wanted to keep it consistent with it's actual values, so I set it to: this.scrollDirection = 'down';.

This should stop it from loading data every single time it reaches the top, even after it has already loaded data.

I know it's not a complete solution, or even very eloquent, but it works for now.

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#831