Hide scrollbar, but still be able to scroll

Ionic Framework ionic-v3
1

I want to be able to scroll through the page, but not see the scrollbar on the right. Is there any way this can be done?

1 Like
2

same problem, Any sugestion?

3

Hoping it’s just some CSS property that needs to be changed …

4

Could you not just set the scroll bar to display: none; in scss?

I’ve never tried

5

Hi @Sidharth_1999,

Add this to your app/app.scss . It will disappear whole app. If you want to specific page, just add this code your page’s scss file. I suggest to you don’t open topic before google searching.

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}
8 Likes
6

First, it doesnt work, second, don`t need to be a douche, there are plenty on google already

2 Likes
7

Thank you so much, it works!

8

It doesnt work and you dont have a be an asshole about it. :face_with_raised_eyebrow:

1 Like
10

I had to hide it using a combination of css and ionic attributes. Don’t forget your no-bounce attr in the scroll wrapper. Works as of Ionic v3 and v4. Hope this helps.

HTML

  <div class="scroller" no-bounce>.
    ... some *ngFor of scrollable content
  </div>

SCSS

  .scroller {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
    scroll-behavior: smooth;

    &::-webkit-scrollbar {
      display: none; // Safari and Chrome
    }
}
1 Like
11

Thanks, it’s works !!!