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:
scroll="false" on the <ion-content>scrollbar-y="false" on the <ion-content>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;
}
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.
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.
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;