[SOLVED] How to hide scroll-bar?

ionic-v1
1

As title.
I want to hide the vertical scroll-bar in an ion-view, and keep the scroll ability. I found some solutions, like this: http://jsfiddle.net/5GCsJ/954/

Is there an option in ionic for this?
Thanks in advanced.

1 Like
2

The scroll bar is its own <div>.
Why don’t you just { display: none; } it?

3

Oh, I didn’t notice that it was a div.
Thanks.

Solution, add this to your style.css.

.scroll-bar-indicator
{
	display: none;
}
11 Likes
4

Dear @xred,

Thanks for your question. I am sure you might have found the best way to this :innocent:
I am just giving the answer for the achieve purpose so that in future if someone refer this discussion, get the updated answer.

In updated Ionic versions, If we are using ion-scroll, we can easily hide the scrollbar using the scrollbar-x and scrollbar-y attribute of the ion-scroll tag.

<ion-scroll scrollbar-x="false" scrollbar-y="false" > </<ion-scroll>

Please refer the [ionScroll] (http://ionicframework.com/docs/api/directive/ionScroll/) for more details.

3 Likes
5

Isn’t working. I am trying it on the ionic view app in android.

6

Try this:

<ion-content overflow-scroll="false">

8 Likes
7

That solved my problem, thanks!

8

If you turns overflow-scroll=“false” in a page with form fields, if some field become behind the keyboard, you will lose the scrolling positioning of the view to you see the field.

9

It’s working. Thanks !

10

In my case, using Ionic 1.2.4 and the html code (<ion-scroll direction="x" class="item wide-item">...</ion-scroll>), the only way to get out with the scrollbar was the code below:

.scroll-view.scroll-x {
    overflow-x: hidden;  /* default value is 'scroll' */
}

I’ve tried <ion-scroll scrollbar-x="false">, <ion-content overflow-scroll="false">, .scroll-bar-indicator { display: none;}… and none of them worked.

2 Likes
11

Hi,

I tried all the solutions above and didn’t succeed to hide scroll bar, exists there a solution for ionic v2?
my code:
<ion-menu side="left" [content]="rootnav" persistent="true"> <ion-content class="menu1"> <div class="menu2"> <ion-list> <ion-item></ion-item> </ion-list> </div> </ion-content> </ion-menu>

12

Thanks @Pablo74… It solved my problem.

13

Hi.
Thanks for the tip! I am using Ionic 1.3.2 and having the same problem with the vertical scrollbar. I have tried all combinations of scrollbar-y values with overflow-scroll values and nothing removed the vertical scrollbar. In version 1.1.0 it worked fine. But the CSS:

.scroll-view.scroll-y {
overflow-y: hidden;
}

did the trick.

14

Here’s another clean, reusable, project-wide solution:

Add this rule in your .sass file where you store any public css rules (default for Ionic2 is file app.scss under /src/app/):

[scrollbar-y-auto] .scroll-content {
  overflow-y: auto !important;
}

Then, whenever you want to hide the scrollbar in an entire page or any sub-component that has it, simply add the attribute scrollbar-y-auto to the parent container.

For a common example, to hide the scrollbar existing in an entire page:

<ion-content scrollbar-y-auto>
    <!-- your html code here -->
</ion-content>

This solution has the added advantage that it only works when you need it and is used just like any other ionic html attributes we use to style things.

Hope this helps someone. :slight_smile:

3 Likes
15

@maninak Hi, this works fine on Android and Windows devices but on ios devices the scroll bar still shows. Any idea?

16

@Hanzo tested the solution I posted above against ionic2 RC5. It works for all 3 platforms: ios, android, windows phone.

Are you serving it using ionic lab? It looks bugged there, but if you go to plain http://localhost:8100/ in chrome, hit ctrl+shift+I to open dev tools, then ctrl+shift+M to toggle device toolbar, then select iphone 6 on the dropdown on the top left and then refresh, you’ll see that it works.

17

Thanks for the solution

18

Great, thanks @maninak for your solution

19

Dude!!! Awesome!!!
This totally worked with Ionic 2.2.1.

20

Thanks! That helped.