Global way to set overflow-scroll?

ionic-v1
1

Is there a way to globally set overflow-scroll or set it programmatically? I’ve found that setting it to false on iOS works great, but it’s very slow on Android. On Android if I set it to true scrolling is a lot faster and smoother, but it looks terrible on iOS.

2

Hmm what exactly is bad on ios? Can you provide an example?
What version of ionic are you using?

3

I am using the newest version, beta 8. On iOS when I try to scroll my ion-content area that has overflow-scroll=“true”, it scrolls the whole app on/off the screen. I’m not sure if this is related, but even with out the overflow-scroll on the container I can scroll the app of the screen if I scroll up and down on the nav/header bars.

4

Sounds like a cordova issue, try adding these lines to your project config.xml,

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

Then run, cordova prepare

5

Lol yup that’d do it. I forgot to add those in on the rebuild. My bad. But now that those are in there, i’d still like to turn it on for Android and off for iOS. The issue now is that with overflow-scroll on for iOS I don’t get the native bounce like I do when it’s off.

6

You could do something like this

if (  ionic.Platform.isAndroid){
    $scope.scroll = false;
  }

  else if (  ionic.Platform.isIOS){
        $scope.scroll = true;
  };

Then have is set on your ion-content like this.

<ion-content overflow-scroll="{{scroll}}">
7

Yeah I tried something like that originally and just tried your exact code. It doesn’t work properly though. Seems like the variable doesn’t get set as soon as the page loads or something so it doesn’t work right on Android unless I hard code it in the ion-content.

8

Try wrapping that with a $timeout, this way it happens on the next scope digest and has time to set itself

9

Has anyone figured this out?

I’m trying to do the same thing but for desktop applications.

Overflow-scroll=true seems to work better on desktop and ‘false’ works better on mobile devices.

Thanks,

10

If you look at the ionic “content” directive, the overflow-scroll is read in the prelink function. There doesn’t seem a way to set it properly through Angular before the value is fetched. Even this doesn’t work: overflow-scroll="{{‘true’}}"

11

For enabling or disabling overflow-scroll you can use
$ionicConfigProvider

To set specific platform use platform. For example:
$ionicConfigProvider.platform.ios.scrolling.jsScrolling(true);
$ionicConfigProvider.platform.android.scrolling.jsScrolling(false);