Force element scrollbar to the top using CSS

Question

I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).

I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.

Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/

I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.

Is there an obvious way to force the scrollbar to render ontop?

@Anirudha On what...? Unless you mean I can modify the z-index of the scrollbar specifically? — Marty, Oct 04 '12 at 06:57

Rohit416 · Answer 1 · 2012-10-04T07:26:59.590

0

you can do this by jquery easily, at some event.

 $("body").load(function () {
    $('scrollable container').css('overflow-y', 'auto');
 });

try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.

edited Oct 04 '12 at 07:26

answered Oct 04 '12 at 07:10

Rohit416

3,416
3
24
41

score 0 · Answer 2 · answered Oct 04 '12 at 07:10

As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.

personally i would make seperate containers
something like

<div id='page'>
    <div id='bluebar'></div>
    <div id='content'></div>
</div>

Demo can be found here ( http://limpid.nl/lab/css/fixed/header )

score 0 · Answer 3 · edited May 23 '17 at 11:43

This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.

Force element scrollbar to the top using CSS

3 Answers3