how to make fixed div to cover browser's scroll-bar?

Question

When I add overflow: scroll; to a fixed overlay div to make its content scrollable, I get two scroll bars in the right and bottom of a browser window, one is a browser's scroll bar and the second one is the div's scroll bar. How can I make the fixed scrollable div to cover up a browser's scrollbar?

div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

have you tried changing your body overflow to hidden so the browser won't show the additional scroll bars? `html, body {overflow:hidden;}` — Howard Renollet, Nov 17 '14 at 16:38
The browser scrollbar is outside the HTML document so you can't "cover it up". You can only turn it off as @HowardRenollet says. — Rhumborl, Nov 17 '14 at 16:42

SNYDERHAUS · Answer 1 · 2014-11-17T16:54:00.983

If you're trying to make the html/body fixed, you need to specify that.

html, body {
    overflow: hidden;
}

Then whichever div you want to scroll through, add

div {
    overflow: scroll;
}

I've made a CodePen so you can see here:

http://codepen.io/brycesnyder/pen/pvomRa

Alternatively, if you want to "hide" the actual scroll bar.. This is a fix I just did to try that. Now sure why you'd want to though! http://codepen.io/brycesnyder/pen/ZYENKj

score 2 · Accepted Answer · answered Nov 17 '14 at 16:55

Ok, per my comment, here's the answer:

You are currently experiencing double scrollbars, one for the window and one for the div, as I show here: http://jsfiddle.net/eL5yvony/

There are a couple of ways to correct this.

First, and probably the easiest, is to set the overflow: hidden; on the html and body elements like so: http://jsfiddle.net/eL5yvony/1/

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

This eliminates the browser's scroll bar and only shows the one in the div

Alternatively, if your div is 100% x 100%, then you could do something like this by setting the margin and padding of your html and body elements, without overriding the browser's scroll functionality: http://jsfiddle.net/eL5yvony/4/

div{
    width: 100%; height: 100%;
    overflow: scroll;
}
html, body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
}

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

I think this is what you are looking for:

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

#child{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 15px; /* Increase this value for cross-browser compatibility */
}

source: Hide scroll bar, but still being able to scroll

edited May 23 '17 at 12:31

Community

1
1

answered Nov 17 '14 at 16:41

Artur Adams

68
7

score 0 · Answer 4 · answered Nov 17 '14 at 16:45

Use overflow: auto;

Demo on JSBIN:

http://jsbin.com/cedabegeju/2/edit

Demo on SE:

for (var i = 0 ; i++  < 1000; ) {
  setTimeout( function() {
    $('div').text($('div').text() + 'x ');
  }, i);
}

div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>

</div>

how to make fixed div to cover browser's scroll-bar?

4 Answers4

Demo on JSBIN:

Demo on SE: