Native Scrolling: Android Testers Wanted

ionic-v1
1

Ionic owes much of its early success to Javascript Scrolling. Since earlier mobile browsers didn’t allow for proper native scroll events, JS scrolling was essential for things like Pull To Refresh, Infinite Scrolling, List Reordering, and Collection Repeat.

Well, mobile browsers have come a long way in this regard. Android 4.1+ supports native scroll events. With Ionic adding Crosswalk support, they work even better. iOS admittedly, is a bit late to the scroll event party. WKWebView in iOS8 supports native scroll events, but hybrid apps cannot yet take advantage of WKWebView without some hacky solutions that break things like ajax requests and plugins. So for now, this post is for those developing for Android. Sorry, iOS devs, soon. Please hassle any Apple employees on the iOS team that you may know.

It is time to begin phasing out JS scrolling for Android! While JS scrolling has served us well, it eats up processor and GPU time that can be better spent making increasingly beautiful apps. We’re going to do this component by component, and we will not change the default away from JS scrolling until we’re convinced that native scrolling is ready for prime time. That’s where you come in!

We’ve added a new ionicConfig setting to enable native scrolling. It essentially does the same thing as overflow-scroll="true" on ion-content does. It can be set from the config phase of the app like so:

angular.module('ionicApp', ['ionic']).config(function($ionicConfigProvider) {
  if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
})

We’re going to be adding native scrolling support component by component. So far, infinite scrolling and the refresher should work. We’ll be adding support for collection-repeat and list reordering soon.

Your mission, should you choose to accept it, is to grab a nightly version of Ionic, try out native scrolling on your app using the config above, and let us know what does and doesn’t work.

To clarify, this is strictly related to seeing how native scrolling works in comparison to JS scrolling regarding infinite scrolling and pull to refresh.

Let me know what you think. If you have something that is broken, try to reproduce it in a codepen or something we can use to reproduce and inspect the problem.

Cheers

25 Likes
3

Perry that’s great! I am definitely going to try this now :smile:
Thanks for the update !!

4

Hi Perry, i tried the first code you put , and it actually made my app not scrollable, so i tried with platform isAndroid, and now it works, but i am not sure if this is what you ment…

I will continue checking and let you know…

1 Like
5

Hi.

So, I’m not sure if this is a issue with this update or something else.
I was using beta-13 before, now I’m using nightly 987.

When I focus in some input, instead of scrolling to focused input, it scrolls to top…

This is happening on Android 4.4 (Moto G), with native browser, Android 4.4 with crosswalk, Android 4.0.3 with crosswalk too.
Also, testing on chrome in Desktop (I usually test using device mode).

Simple example:

Obs.: I know the video was recording using chrome on Desktop, but the same bug appears on the informed devices and Android versions.

Edit:
Found this issue:

Acordding to the bug reported, when using overflow-scroll It scrolls to top and don’t focus to input again …
So, disabling javascript scroll, does the same as overflow-scroll=“true”.
I think It should be fixed cause it’s really annoying, specially for end users

6

Hey Shaulhader, I should have mentioned that this goes outside any controller. Also, you’ll want to rename ionicApp to whatever your app name is

7

Thanks stivekx, that’s exactly the kind of thing we’re looking for.

1 Like
8

Working great ! The scroll is A LOT more fluid on long lists on my Nexus5.
Just noticed two problems :

  • I have a button bar with a ng-click event that toggles a class. After toggling the style and in order to effectively view the change I have to click somewhere else on the screen. As if the button stayed in a “hover” state or something like that.
  • When focused, fields are sometimes covered by the keyboard
9

ok, looks like we need to spend some time testing form elements with native scrolling

10

Well, for me I just set the scroll to the input position instead of scrolling top to 0, and worked fine …

11

@perry - just fyi - I’ve had success using angular ui-scroll (https://github.com/angular-ui/ui-utils/tree/master/modules/scroll) combined with Crosswalk on Android to implement collection-repeat and infinite-scroll type functionality that works pretty well on 4.0+ devices. The only thing I don’t get with it is PTR. Might be worth checking out to see if there are concepts you might want to use. Feel free to PM me if you’d like to try a demo.

1 Like
12

It’s possible to implement scrollbars?

13

Hi,

scrolling is much better with my nexus 4 ( with lollipop ). It work great with Infinite Scroll.

However ion-refresher is really hard to activated. I have to pull a lot for start it and the animation is really slow.

For me, it is a great improvement.

Thank you

14

Tested on nexus 5 lollipop and infinite scroll is working.
Thank you

15

Hi guys,

I am finding that in my app the on-infinite function is being fired randomly (not always), seems like a racing condition issue somewhere?

If I enable jsScrolling it works fine, it is fired 100% of the times.

It is not easy for me to put a codepen together as my app is quite complex now… I will try though…

16

Hello Perry,

Just to tell you that Home’n’go ( https://play.google.com/store/apps/details?id=com.homengo.app) is already using native scrolling on the search results page ( long list ) with collection repeat and infinite scrolling => we felt confident enough to use it in production.

I’ll test it with the global param and see what’s up.

EDIT : Tested and work fine except for forms => I have the same bug that stivekx described. Any focus on input will scroll the window top.

Thanks

1 Like
17

smurf81, we have a 3x “drag multiplier”, when overscrolling for pull to refresh. I’ve wondered if that drag is too high. Is that what you’re referring to?

18

Thanks Elmurci, I’ll see if I can reproduce it too.

19

It works fine! Scrolling 1000 itens… its very good!

but did not show the scroll bar

20

also, the css loader animation isn’t very smooth (tested in Moto G, Android 4.4 - Crosswalk), and I think it is not 100% centered.