How to hide [ion-scroll] scrollbar?

Ionic Framework ionic-v3
1

I implemented a horizontal scroll and want to hide scrollbar. There’re many solutions for IONIC 1 and I tried many of them but didn’t work.
Anybody knows a clear solution for IONIC 2? Please help :]

HTML

<ion-scroll scrollX="true">
  <button ion-button color="danger" *ngFor="let category of categories">
    <p>{{category.name}}</p>
  </button>
</ion-scroll>

SCSS

ion-scroll {
    height: 50px;
    white-space: nowrap;
}

.button {
    height: 50px;
}

RESULT

image
Screen Shot 2016-11-15 at 1.58.50 AM.png1002×52 3.66 KB

2

try adding this ::-webkit-scrollbar { display: none !important; }
to the first parent of button (probably a div).

if this didn’t work then try adding a div that wraps the buttons and give it a class name (“container-class”)
then in css

.container-class {
    ::-webkit-scrollbar {
                        display: none !important;
                    }
}
2 Likes
3

I wrapped my ion-scroll in a div and gave it a class name following your instruction. And it worked like a charm!! Many thanks!

4

I also tried this solution. Seems to work. Until you switch to another page and return to the page. Then the X scrollbar is visible again…Any ideas? Is this a bug?

5

Thanks it worked exactly the way to wrote.