Ionic 4: how to hide ScrollBar in ion-content - html

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

::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
overflow: scroll!important;
height: 100%!important;
}

Answer 5

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.

Answer 6

Try this, seems to work fine so far while preserving all functionality in Ionic 5.
// variables.scss
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}

Answer 7

I have confirmed the following solution works in Ionic 5 although i do believe this should work in Ionic 4 as well.
As others here have noted, the scrollbar which controls the scrolling of content inside of an ion-content component exists in the shadow DOM within it and thus you need to target the scrollbar using ::part() CSS pseudo-element.
In your global style sheet add the following css declarations which will hide the scrollbar while retaining the ability to scroll:
/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
/* firefox */
ion-content::part(scroll) {
scrollbar-width: none;
}

Answer 8

Thank you #rostislav
Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)
solution: add these lines to both global.scss and variables.scss:
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
NOTIC: then clear browser cache and refresh page, it's great!
but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!

Answer 9

Refactored #Sergey Oleynikov solution and it worked perfectly for me
ion-content {
// overwrite inline styles
// --offset-bottom: auto !important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}

Answer 10

Here is a hack? https://github.com/ionic-team/ionic/issues/17685
<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

Answer 11

I couldn't find a reliable way to do this using the previously mentioned methods, they either didn't work or stopped the scrolling all together. My approach was to make the ion-content window wider than the screen.
.noscroller {
left: -10px;
width: calc(100% + 20px);
}

Answer 12

if you want to remove the scroll dynamically. You can use the approach of removing the scroll-y class from shadowDOM at <main class="inner-scroll scroll-y"></main> within <ion-content></ion-content>.
Firstly, import { Renderer2 } from '#angular/core' in your constructor(renderer: Renderer2)
To reach this, in your your-component.component.ts at event cycle ngAfterViewInit or onward.
This will remove the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
This will add the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}

Answer 13

The Code from spicemix worked! I pasted the code in global.scss and not in variables.scss
/* global.scss */
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}

Answer 14

For me it works after adding the no-scroll class in the <IonContent> element, as mentioned above, and after adding the following lines
useEffect(() => {
const style = document.createElement("style");
style.innerHTML = ".inner-scroll.scroll-y.overscroll { overflow: initial; }";
ionContent.current.shadowRoot.appendChild(style);
}, []);
Then in the render <IonContent ref={ionContent} className="no-scroll">...</IonContent>
The thing is that in these classes inner-scroll and scroll-y there is a overflow: hidden; style so we just have to override it.

Answer 15

I believe you can use
slot="fixed"
to make the element fixed thus removing the scroll bar by default for you.
Refer ionic documentation