How can I disable or hide the scrollbar within an Ionic 2 <ion-content>

Question

I have an Angular 2 app wrapped in Ionic 2. I'm using <ion-tabs>, and within each tab is an <ion-content>. The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed. It appears that, when compiled, an <ion-content> has a <scroll-content> injected into it. I don't want this behavior.

I have tried many of the solutions that used to work in Ionic 1, but they do not work in Ionic 2:

• Setting scroll="false" on the <ion-content>
• Setting scrollbar-y="false" on the <ion-content>
• Setting overflow-scroll="false" on the <ion-content>

• Setting the following in css:

  .scroll-bar-indicator { display: none; }

etc...

Setting the following actually does work to remove the scrollbar, but I'd rather not hijack the browser behavior, and also it removes scrollbars from content internal to the <ion-content> tag, which I don't want.

::-webkit-scrollbar, *::-webkit-scrollbar {   display: none; } 

Answer 1

They have a class for that and should be able to use:

 import { App } from 'ionic-angular';   constructor(private app: App) {    app.setScrollDisabled(true); }; 

See forum discussion here. But it seems to have stopped working after 2.0.0-rc.1 I believe thats related to this in their CHANGELOG when they changed a lot of attributes to classes (i.e. scroll-content to .scroll-content) and the app.setScrollDisabled(true); hasn't been updated to reflect some of those changes.

If your using 2.0.0-rc.2 or 2.0.0-rc.3 I don't believe <ion-content overflow-scroll="false"> or <ion-content ion-fixed> will work either so from now create your own class.

So if you're on 2.0.0-rc.2 or 2.0.0-rc.3 you should be able to do so by adding this to your .scss

.no-scroll .scroll-content{      overflow: hidden; } 

and add this class to your ion-content like this

<ion-content class="no-scroll"> .. </ion-content> 

So now just keep an eye out for this being fixed on versions after 2.0.0-rc.3.

---

UPDATE (2.0.0-rc.6): It looks like they made the App modules setDisableScroll function private (as seen here)

Also here's a full list of the available function for the App module by version:

• 2.0.0-rc.1 (has setScrollDisabled)

• 2.0.0-rc.2 (has setScrollDisabled)

• 2.0.0-rc.3 (has setScrollDisabled)

• 2.0.0-rc.4 (no setScrollDisabled, and no alternative)

• 2.0.0-rc.5 (still no setScrollDisabled or alternative)

• 2.0.0-rc.6 (no setScrollDisabled, and no alternative but they did a a lot more view tirgger functions like viewWillUnload)

So unless they bring it back keep using the following:

.no-scroll .scroll-content{ overflow: hidden; }

Also I'm a sucker for them internet points so preeez upvote if you found this helpful.

Answer 2

In ionic2 I saw overflow-y is set to scroll by default so in your src/app/app.scss file try this:

.scroll-content {    overflow-y: auto !important; } 

This will hide scroll bar from every view and also enable scrolling when it has content.