How can I disable or hide the scrollbar within an Ionic 2

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.

Leave a Comment