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.

score 23 · Answer 1 · answered Oct 26 '19 at 12:53

23

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

answered Oct 26 '19 at 12:53

Sergey Oleynikov

409
5
5

1

You should add "scrollbar-width: none;" for Firefox :) – jpierront Apr 12 '20 at 08:02
Of course, you right if it is firefox. I guess for android and ios uses WebView component is based on the Chromium. That's why it can be missed. – Sergey Oleynikov Apr 13 '20 at 12:43
This solution hides the scrollbars but blocks the scrollToTop and scrollToBottom function stopped working for me. Is it same for you as well? – Hemang Oct 13 '20 at 08:22
4

It also blocks infinite scrolling ;( – Islam Murtazaev Jan 13 '21 at 15:35
I used overflow: hidden on my end to make it work :) – Raphael St Jul 26 '22 at 23:08

score 10 · Answer 2 · answered Feb 17 '19 at 12:15

10

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

answered Feb 17 '19 at 12:15

Rostislav

165
2

15

This disables scrolling too, it does not just hide the scroll bar. – Jay Ordway Mar 09 '19 at 23:28
1

This worked superbly! And I can't see any scrollbar as well... I spent hours for this in ionic 4 because all scrolling attributes of the previous version were deprecated. Thank you! – bunny Jun 19 '19 at 13:40

score 7 · Answer 3 · answered Nov 14 '20 at 20:36

7

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

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

answered Nov 14 '20 at 20:36

Felix Niedermann

321
3
18

chetan chumble · Answer 4 · 2019-05-23T08:07:12.967

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

edited May 23 '19 at 08:07

answered May 23 '19 at 08:04

chetan chumble

41
3

4

Please add some explanation to your answer. – sanyassh May 23 '19 at 08:22

score 4 · Answer 5 · answered Jun 03 '21 at 06:43

4

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

answered Jun 03 '21 at 06:43

spicemix

101
1
4

1

This is a super hacky solution, but it was the only one that hide the scrollbar and preserved scrolling functionality... So good job – Braelyn B Mar 29 '22 at 23:39

Kevin Boosten · Answer 6 · 2020-08-20T10:53:46.970

3

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.

edited Aug 20 '20 at 10:53

answered Aug 20 '20 at 09:02

Kevin Boosten

244
1
11

This works for me in Chrome too. https://stackoverflow.com/a/59838653/1603234 – Hemang Oct 12 '20 at 09:48

score 2 · Answer 7 · answered Jan 28 '22 at 02:18

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

Ali.Houshy · Answer 8 · 2019-05-23T07:36:55.387

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!

score 0 · Answer 9 · answered Nov 10 '19 at 21:33

0

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>

answered Nov 10 '19 at 21:33

Mark

370
5
10

This "hack" only works when you aren't using an ion-header or anything else outside ion-content. – Manuel Feb 21 '20 at 17:07

score 0 · Answer 10 · edited Jul 16 '20 at 15:37

0

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

edited Jul 16 '20 at 15:37

David Buck

3,752
35
31
35

answered Jul 16 '20 at 15:18

Makerzy

21
5

It also blocks scrolling – Sandip Moradiya Jun 08 '23 at 06:07

score 0 · Answer 11 · answered Oct 21 '20 at 17:30

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);
}

Marcos Costa · Answer 12 · 2021-01-15T17:43:21.340

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");
    
  }

score 0 · Answer 13 · answered Dec 11 '21 at 02:52

0

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

answered Dec 11 '21 at 02:52

luettgau

1
1

score 0 · Answer 14 · answered May 17 '22 at 09:51

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.

score 0 · Answer 15 · answered Jun 06 '23 at 08:28

0

You can simply add scroll-y="false" attribute. Go the same issue, this fixed it.

<ion-content scroll-y="false">Content here</ion-content>

answered Jun 06 '23 at 08:28

Claudiu Oprisan

11
2

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – DSDmark Jun 09 '23 at 15:15

score -2 · Answer 16 · edited Sep 17 '20 at 18:46

-2

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

Refer ionic documentation

edited Sep 17 '20 at 18:46

Dharman

30,962
25
85
135

answered Sep 17 '20 at 18:40

Gabriel Innocent Okello

1
3

Ionic 4: how to hide ScrollBar in ion-content

16 Answers16

Linked