Allow scroll but hide scrollbar

Question

I have a div with element styles like this:

 <div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>

I need to allow scrolling along the y-axis when it becomes higher than 300px, this works fine. But I need to set "visiblity = false" to scroll bar itself.

I tried to use this element style:

overflow-y: hidden;

While it hides the scroll bar, it also disallows scrolling. Is there a way to get scrolling without having the scrollbar visible?

Try [nanoScroller](http://jamesflorentino.github.io/nanoScrollerJS/), it shows the scroll bar when you hover. — Mottie, Aug 02 '14 at 13:44
Hi @Jake745. I edited your question, because it was not comprehensible before. Can you please check that it still asks what you wanted to ask? If not, please leave a comment or edit it yourself :). — Jonas Schäfer, Aug 02 '14 at 18:37

score 39 · Accepted Answer · answered Aug 11 '14 at 08:53

39

It's better, if you use two div containers in HTML .

As Shown Below:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS:

 #container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}

answered Aug 11 '14 at 08:53

Joe Mike

1,150
1
9
16

44

Copy of http://stackoverflow.com/a/16671476/540144 – itsazzad May 07 '15 at 13:42

score 28 · Answer 2 · answered Nov 28 '16 at 20:04

28

I know this is an oldie but here is a quick way to hide the scroll bar with pure CSS.

Just add

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

To your id or class of the div you're using the scroll bar with.

Here is a helpful link Custom Scroll Bar in Webkit

answered Nov 28 '16 at 20:04

lostInTheTetons

1,162
1
13
23

doesnt work on Firefox though ;) – estellechvl Feb 17 '17 at 14:59
correct, Firefox doesn't have ::webkit .. you would have to use some javascript or jquery to hide it or try using some css to style it. – lostInTheTetons Feb 24 '17 at 15:28

score 11 · Answer 3 · answered Aug 02 '14 at 14:16

11

Try this:

HTML:

<div id="container">
    <div id="content">
        // Content here
    </div>
</div>

CSS:

#container{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#content{
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    overflow:hidden;
}

JSFiddle Demo

Tested on FF and Safari.

answered Aug 02 '14 at 14:16

imbondbaby

6,351
3
21
54

1

Good idea imbondbaby. – Suganth G Aug 04 '14 at 04:06
10

-1... So you are going to accept the answer, then unaccept it? – imbondbaby Aug 11 '14 at 15:08

Allow scroll but hide scrollbar

3 Answers3

Linked