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

Question

I have an Angular 2 app wrapped in Ionic 2. I\'m using , and within each tab is an . The content in this area ne

Answer 1

If you just want to hide the scroll-bar, and not want to disable the scrolling itself, then use no-bounce attr:

<ion-content no-bounce></ion-content>

thanks to larssn for his comment

But if you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

and I added some scss for the has-header class:

ion-app {
    &.md {
        .has-header {
            margin-top: $toolbar-md-height;
        }
    }
    &.wp {
        .has-header {
            margin-top: $toolbar-wp-height;
        }
    }
    &.ios {
        .has-header {
            margin-top: $toolbar-ios-height;
        }
    }
}

Answer 2

You can override the scroll-content style in your .scss file.

// scroll-content is a class
.scroll-content {
    overflow-y: auto;
}

or better still you can set overflow-y: hidden;

Answer 3

Adding this in config.xml works for me.

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

Answer 4

Ionic2 has added setScrollDisabled with underscore prefix. So if you would like to access just make use of injectable variable app and try to set the this.app._setScrollDisabled(true).I hope it will work.

Answer 5

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 6

use overflow-scroll="false" in ion-content