Use infinite-scroll or ion-refresher with overflow-scroll="true"

ionic-v1
1

Is that possible? if I use:

<ion-content overflow-scroll="true">
  <ion-refresher
            pulling-text="Pull to refresh..."
            refreshing-text="loading..."
            on-refresh="doRefresh()">
   </ion-refresher>
   <ion-list>
     <ion-item ng-repeat="item in items">
       Hello, {{item}}!
     </ion-item>
   </ion-list>
   <ion-infinite-scroll
            on-infinite="loadMore()"
            ng-if="moreDataCanBeLoaded"
            distance="15%">
   </ion-infinite-scroll>
</ion-content>

I get:

Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'ionRefresher', can't be found!
Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'ionInfiniteScroll', can't be found!

And if there is a way to use both infinite-scroll and ion-refresher with overflow-scroll="true" is there a way to use overflow-scroll="true" only on Android and not on iOS?

Thanks

2 Likes
2

Short answer: no.

Our scroller lets us have more control and add features (like PTR, infinite scroll, etc) that you can’t easily do with native scrolling.

3

The problem I have is this one: github issue.

on Android the scroll with big images (the double of the device width to handle retina and HD display) is a disaster… it’s not smooth!

4

no one has the same problem on Android? No one is building an app like instagram?

5

Native scrolling performance ranges from satisfatory to amazing on android devices regardless of how much content you put into a list, as I commented on the github issue. However, Ionic has chosen to value virtual javascript-based scrolling over native scrolling to be able to easily offer features such as Pull-to-refresh and infinite scrolling, just like @mhartington mentioned. Arguments given were that native scrolling event detection is buggy and that overall scroll isn’t configurable.

There were somewhat longer discussions on this topic at https://github.com/driftyco/ionic/issues/287 and http://html5hub.com/comparing-html5-mobile-ui-frameworks/#comment-1151047093, you should check it out.

In the end, our options with Ionic are:

6

I agree, native-scroll(overflow-scroll) is workings much better specially with iOS(the screen is flashing on scroll- it actually scroll it too fast to the bouncing part).

Is there any way to make the refresher work with overflow-scroll?

2 Likes
7

ionic scroll is too bad, even my mobile is xiaomi 2s with 1.7GHz CPU 2G RAM, Android 4.4.2 kitkat, i can’t get smooth scroll, finally i use overflow-scroll=true, this give me like native app effect, give up any pull refresh and infinite-scroll.

1 Like
8

@fredericogalvao thanks for the nice sum up! I am facing the same problems with laggy scrolling in Android.

My combination is:

  • ion refresher
  • ion list with complex elements inside (mostly text only one tiny image)

Its a desaster on my brand new and strong OnePlus One. On nexus 5 its “OK”, but only the scrolling part. Pull-to-refresh is very laggy.

In iOS the performance is just like native. It would be amazing if the Android scroll implementation can reach the level as iOS. Otherwise I am really struggling with myself releasing the Android version.

9

On android you need crosswalk otherwise you will have trouble :smile:

Also if you update to nightly you can now use infinite scroll AND overflow-scroll=“true” ( see http://code.ionicframework.com/nightly/CHANGELOG.html)

10

Did I miss PTR with overflow-scroll=“true” ? or is that still not implemented ?

11

Just saw it, it is present. When is this coming out as a release ?

12

I am also facing the same issue. The scroll is good if we disable the jsScrolling. But ion-refresher is not working. Even side menu bar is not moving right side when we swipe right. When i click on the toggle button, then the menu bar is working fine. If any one find some solution please let me know. It will be really helpful. By the way i am using 1.0.0-rc.2

1 Like
13

I managed to make both infinite-scroll and ion-refresher with overflow-scroll=“true” by changing code in ionic.bundle.js. Only changed tow line of code to make it work:

  1. in function handleTouchend(), move the line:
    startY = null;
    as the first line of the function;
  2. in function handleTouchmove(), change the line:
    if (deltaY - dragOffset <= 0 || scrollParent.scrollTop !== 0) {
    to:
    if (deltaY - dragOffset < 0 || scrollParent.scrollTop !== 0) {

That’s all changes, it works well by far.

@mhartington do you see any potential issues of this method?