[Ionic 5] Hide scrollbar on ion-content

Ionic Framework
1

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.

5 Likes
2

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

1 Like
3 
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

5 Likes
4

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

5

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

6

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:

image
image451×844 12.1 KB

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

Thank you so much!!!

7

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

8

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!!!

9

You need to also add

–padding-bottom: 200px!important;

10

// 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
}

4 Likes
11

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?

1 Like
12

Well, how about this for a kludge…?

// styles.scss

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

Thanks. This is very helpful.

1 Like
14

In global.scss add:

.no-scroll {

--offset-bottom: auto!important;

--overflow: hidden;

overflow: auto;

&::-webkit-scrollbar {

  display: none;

}

}

— in class ion-segment add: class=“no-scroll”

is work for me

ionic 4/5/6

15

It will also stop scrolling

16

it works well , thanks a lot. But in Ionic@react v6, it changed shadowDom ::part(background) bottom and caused height to 0. So the background color disappeared.Add the css can resolve it

ion-content {
  --offset-bottom: auto !important;
  --overflow: auto;
  --background: #F7F7FA;
  overflow: auto;

  &::part(background) {
    bottom: 0;
  }

  &::-webkit-scrollbar {
    display: none;
    scrollbar-width: none;
  }
}
2 Likes
17

Thank you so much… you just made my day.

18

Any fixes for this on Ionic 6?