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:

// 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.

Comments

Required for comment verification



Ken

I tried this, and sure enough the scrollbar disappeared. You said it could be added with CSS. I cannot find any description of how to do this. Can you shed some light on this?

Reply · 2 years, 6 months ago
Anicar

Hi, $ionicConfigProvider.scrolling doesn't exist in the new version of Ionic, at least I can't make it work. Any suggestions?

Reply · 2 years, 8 months ago