Improve Ionic's Performance in Android With Native Scrolls

19 Mar · by Tim Kamanin · 1 min read

Does your Ionic app feel sluggish on scrolls in Android? Well, there's a way to cure that. Ionic has introduced native scrolls in its latest release. In short: native scroll disables Ionic's JS scrolling and releases CPU by handing over the scrolling task to the OS ie Android. As a result, scrolls are smooth as they're in a standalone browser.

Of course, there are some caveats:

native scrolls won't work with collection-repeat;
scroll bar will disappear but can be added via CSS;
iOS has a sluggish support of native scrolls.

To enable native scrolls you can either:

a) Add overflow-scroll=true to the content tag. This is a bit tedious approach and will get enabled for every platform (remember about iOS behavious).

b) As a second approach, we can enable native scrolls for Android only devices and do it in one place, in the app's main file:

javascript

// file: app.js

...

.config(function ($ionicConfigProvider) {

  // Enable native scrolls for Android platform only,
  // as you see, we're disabling jsScrolling to achieve this.
  if (ionic.Platform.isAndroid()) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
  }

});

That's all, now go and check how your app performs under Android.