Ionic 4: how to hide ScrollBar in ion-content

Question

I'm trying to hide the scroll-bar in ion-content (Ionic 4) there's no ion-scroll on ionic 4 so I used the ion-content but I can't find any css attribute to hide it (most of them not work)

I do want to scroll but I don't want to see the scrollbar

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

I've tried it but it doesn't work in ion-content.

Answer 1

Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar. Need to use CSS Custom Properties. Add styles to global scope.

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

Answer 2

In Ionic 4 you must use following, because Ionic use shadow DOM:

global.scss

.no-scroll {
    --overflow: hidden;
}

and in page

<ion-content class="no-scroll">

Answer 3

::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}

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

Answer 4

The <ion-content> is a custom element with shadom DOM. There's something called the ::part pseudo element to target an element in a shadom DOM element. If you look at the shadow dom, you will see this:

Take notice of the part="scroll". Ionic did add parts to their elements that we can use via the ::part pseudo element to target this and apply our custom css to hide the scrollbar:

ion-content::part(scroll)::-webkit-scrollbar {
   display: none;
}

Tested this on iOS and Android successfully. I'm not getting it to work on Chrome though.