How to remove the scrollbar in ionicModal


#1

hi all,

I get scrollbar in ionicModal all the time, in Chrome.

Here is my code:

<ion-modal-view>
<ion-header-bar>
<h1 class="title">登录</h1>
</ion-header-bar>
<ion-content class="padding">
<form ng-submit="doSignin($event)">
  <!--<button style="display:none">aa</button>-->
  <div class="list list-inset">
    <label class="item item-input">
      <input type="text" placeholder="用户名" ng-model="username">
    </label>
    <label class="item item-input">
      <input type="password" placeholder="密码" ng-model="passwd">
    </label>
  </div>
  <button class="button button-block button-positive">
    登录
  </button>
</form>
</ion-content>
</ion-modal-view>

I try to add scrollbar-y=“false”, but it doesn’t work. My ionic version is 1.2.1.

Is there any solution for this?


#2

Have you tried overflow-scroll="false" for <ion-content>?


#3

like @Koleman says. If you are using ionic >1.1 the default scroll approach is native overflow-scrolling. This has some ups (it should be faster in most cases), but some downs (some ionic components are not working like expected :sob: aaaannnd you get the native browser handlings … like scrollbars). So in this case you can switch off overflow-scrolling on ion-contents and ion-scrolls.

Sure there is the possibility to hide the bars via css, but in most cases you need the js-scrolling functionalities


#4

This works! Thank you! Any idea if this is the “official” Ionic solution? Or, more of a hack that works (for now)?


#5

Update: This appears to be the official Ionic solution.

http://ionicframework.com/docs/api/directive/ionContent/

Furthermore, following links from that page suggests that you might be better off using the following for app-wide configuration:

$ionicConfigProvider.scrolling.jsScrolling(false); //(or true, depending on your needs)