Menu
Is there any way to overlay a DIV over the browser's scrollbar?
I realize the scrollbar can be hidden using overflow: none, but I'm wanting to actually put a DIV over the scrollbar instead of hiding it.
280
You can place your div over scroll bar if that scroll is not for <html> element. Here is code which makes overflowed div over scrollbar of another div.
JSFiddle
HTML:
<body>
<div id="content">
Code goes here instead of BODY
<div class="test"></div>
</div>
<div class="overflow">CONTENT FOR OVERFLOW ELEMENTS</div>
</body>
CSS:
html, body {
margin:0;
padding: 0;
}
#content {
background: lime;
overflow: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 10px;
background: blue;
}
.test {
background: red;
height: 1000px;
margin: 20px;
}
No, you cannot render content outside the viewport. However, you can remove the browser's scrollbar and substitute your own, allowing much greater flexibility.
See this question for more information.
25
If you look at a document in google docs, this is very similar to what they do to show their own scroll bar.
If you hide the scrollbar using overflow:hidden, then you are free to create your own element on the right hand side of your page. You won't be "overlaying" the browser's scroll bar. Instead your scrollbar will simply be in the same location as the browser's was before you hid it using overflow:hidden.
You will plunge yourself into the fun challenge of emulating the scrollbar's behavior, with everything from dragging, clicking on the page up/down areas, etc. and moving your content in response.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
