[Ionic 5] Hide scrollbar on ion-content

Hello,

I find it impossible to hide the webkit scrollbar on ion-content.
I’ve used pretty much every possible combination of

::-webkit-scrollbar {
        display: none !important;
    }

ion-content::webkit-scrollbar {
 display:none !important;
}

*::-webkit-scrollbar {
        display: none !important;
    }

And it still displays on every ion-content…
Actually sometimes it doesn’t display on the first ion-content, then on page change it starts displaying the scrollbar on every ion-content, even the first one!

I can’t understand why it’s so hard to disable a scrollbar? Does this problem come from the new web-components that have a shadow DOM so CSS rules don’t apply to them?
In this case, it would be wise to have a CSS variable to disable the scrollbar.

If anyone knows how to achieve this, please advice.

4 Likes

I am having the same issue. Nothing is working. If anybody have an answer for this, please post it below.

1 Like
ion-content {
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

NOTE: If you are using a background image in the div after ion-content then do their background-size: contain; Tested in ios. Thanx

3 Likes

Do you finally success to hide the scroll bar?
I’m working on this for 2 hours, and nothing is working…

Yes, it’s working fine for me. can you please share a demo code on how you are using?

I put this code in my global.css

ion-content {
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

yes, I no longer have a scroll bar, but I can’t scroll along my page …

and:

*::-webkit-scrollbar {
display: none !important;
}

dosn’t work.

I have this display:

and my code is very simple:
ion-content with some div inside.

Thank you so much!!!

Which version you are using? Can you please show the output of “ionic info”?

I’m using Ionic 5 :

Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.3.2
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 9 other plugins)

Utility:

cordova-res : 0.15.1
native-run : 1.0.0

System:

NodeJS : v12.18.3
npm : 6.14.6
OS : Windows 10

Thank you!!! thank you so much!!!

You need to also add

–padding-bottom: 200px!important;

// Hide scrollbar for Chrome, Safari and Opera
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}

// Hide scrollbar for IE, Edge and Firefox
ion-content::part(scroll) {
-ms-overflow-style: none; // IE and Edge
scrollbar-width: none; // Firefox
}

2 Likes

Is there a way of simultaneously hiding the ion-content scrollbar and retaining all scrolling functionality such as scrollToPoint() as well as manual scrolling? This seems to be a basic functionality Ionic should provide out of the box. Does that absence suggest it’s impossible?

Well, how about this for a kludge…?

// styles.scss

ion-content {
  width: calc(100% + 15px);
}
ion-content::part(scroll) {
  padding-right: 15px;
}
1 Like

Thanks. This is very helpful.

1 Like