can't hide scrollbar when using overflow: auto

Question

I have this CSS:

.div {
    background-color: red;
    position: relative;
    height: 414px;
    overflow: auto;
    width: 902px;
    margin: 0px auto;
}

I tried with overflow-y: hidden;, scrollbar disappear but scroll isn't working. Hope you understand what I want... Also, should I use auto or scroll? With auto I see horizontal bar too.

Here is JSFiddle: http://jsfiddle.net/sp95S/
Thanks!

What do you expect to happen? This is the correct behaviour. — Danny Beckett, Dec 07 '13 at 22:18
Might be a duplicate of this: http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page (check out the second answer) — linstantnoodles, Dec 07 '13 at 22:21
You need to use JavaScript in that case. CSS alone cannot do what you're asking. — Danny Beckett, Dec 07 '13 at 22:23
possible duplicate of [Using jQuery to hide div scrollbar, but retain scrolling?](http://stackoverflow.com/questions/12186100/using-jquery-to-hide-div-scrollbar-but-retain-scrolling) — andershagbard, Dec 07 '13 at 22:35

score 25 · Accepted Answer · answered Dec 07 '13 at 22:42

25

Create an inner div: http://jsfiddle.net/sp95S/1/

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
}
#inner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;
}

answered Dec 07 '13 at 22:42

user1121487

2,662
8
42
63

Very smart answer ! – Lucian Minea Jan 05 '18 at 10:13

score 12 · Answer 2 · answered Jul 18 '20 at 14:46

If you want to hide the scrollbar, but keep the functionality, you can use:

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

score 9 · Answer 3 · edited May 23 '17 at 11:55

9

It seems like you want to have the page still scroll without the scrollbar showing.

This has been answered here a couple of times already:

Basically you can use javascript (or jquery, though you don't necessarily need it). On webkit browsers, there is a function to hide the scrollbars:

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

but it won't work for firefox or internet explorer or opera.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 07 '13 at 22:25

ERose

189
5

1

This *might* work on Opera, since it now runs Webkit, but I still wouldn't use it, since it won't work on anything other than Webkit. – Danny Beckett Dec 07 '13 at 22:32

score 1 · Answer 4 · answered Dec 07 '13 at 22:22

1

If you want to hide the scroll bar, but maintain scroll you can look into a plugin called slimscroll. The scroll bar is there but it can be configure to be rather un-noticable.

http://rocha.la/jQuery-slimScroll

answered Dec 07 '13 at 22:22

Vigs

1,286
3
13
30

can't hide scrollbar when using overflow: auto

4 Answers4

Linked