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

user_2602816 0
Viewed 41309

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;
}
ionic2 ionic-framework angular
10 Answers

Add this css into your styles,

I fetched this class from inspect element which contains scrollbar and items

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

worked for me

user_38610500

I got it to work perfectly in my Ionic5/Angular11 app while retaining scroll events and hiding the scrollbar with the code below:

ion-content {
  width: calc(100% + 20px);
  --padding-end: 40px !important;
}

ion-content::part(scroll) {
  margin-right: -20px;
}
user_176219290
Related