Is it possible to overlay a DIV over the browser's scrollbar?

Question

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.

You can hide the scrollbar, and then create a scrollbar yourself with javascript, and then overlay a `div` on top of that. Please don't do this. You don't want to put anything over a scroll bar. — MattDiamant, Feb 09 '15 at 21:21
Yes, use chrome and hope yours bugs out like mine: https://i.imgur.com/IHEziKK.png (It's put my scrollbar into overlay mode yet if I open it in a new tab, it's the normal scrollbar. Like so: https://i.imgur.com/Jkbw7S8.png — brandito, Jul 20 '18 at 03:20

score 6 · Answer 1 · answered Feb 09 '15 at 21:33

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;
}

Beat me to it! [Here's another fiddle that show this off](http://jsfiddle.net/nLvn1suv/). — Alexander O'Mara, Feb 09 '15 at 21:35

score 4 · Answer 2 · edited May 23 '17 at 12:02

4

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.

edited May 23 '17 at 12:02

Community

1
1

answered Feb 09 '15 at 21:21

isherwood

58,414
16
114
157

@manuc66, I don't see how that's in any way relevant to this topic. – isherwood Aug 01 '17 at 14:48

AaronLS · Answer 3 · 2018-07-18T21:21:27.677

1

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.

edited Jul 18 '18 at 21:21

answered Feb 09 '15 at 21:23

AaronLS

37,329
20
143
202

`overflow: none;`? – brandito Jul 17 '18 at 01:24
1

@Brandito Jeopardy! – AaronLS Jul 18 '18 at 21:21
Much better @AaronLS – brandito Jul 18 '18 at 23:41
1

@Brandito Yeh, the original question asked about `overflow:none` and offhand I didn't notice the error. – AaronLS Jul 19 '18 at 13:51
1

If I was in charge of the property values I would have chosen 'none' over 'hidden'. – brandito Jul 20 '18 at 01:07

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

No. You cannot unless you write your own scrollbar implementation.

The drawbacks of writing your own scrollbar implementation include lack of testing and support for other devices.

However, this library and this question may be helpful.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 09 '15 at 21:22

qaisjp

722
8
31

score 0 · Answer 5 · answered Feb 09 '15 at 21:38

You can not place a div outside the document/viewport. However you are able to hide the scrollbar and take its place in with a div or custom scrollbar.

jsfiddle demo

css

#scrollbardiv{
    height:100%;
    width:12px;
    background:red;
    position:fixed;
    top:0px;
    right:0px;
}

.noscrl{
    overflow:hidden;
}
body{
    overflow:auto;
}

js

$("#toggle").on("click", function(){

  $("body").toggleClass("noscrl");

})

Is it possible to overlay a DIV over the browser's scrollbar?

5 Answers5