How Can I Move the Web Browsers Scrollbar and Style It (CSS)?

Question

Upon visiting the site that I'm currently working on you would immediately notice the fact that a bar placed at the top of your browser follows you down as you scroll through the blogs posts. I was wondering if there was any method which I could use to both shift the scrollbar below the bar rather than beside it and then style the bar to suit the sites style.

Image:

Answer 1

No, you won't be able to style the bar since it belongs to the browser, and not to the site itself.

Answer 2

You can use the cross-browser FleXcroll to style the scrollbars, however you can not move it, it adjusts automatically depending on the resolution and structure of the page.

Answer 3

Well, you could put the content in a div, and then limit the height of the div to force the browser to place a scrollbar there (to scroll within the div). This way, the page fits within the browser window but the div containing the content has its very own scroll bar.

For example, here is the style from Stack Overflow's very own Related Questions list when you ask a question:

"height:150px; overflow-y:scroll; overflow-x:clip;"

As for styling, I'm not sure that's possible with this workaround.

So basically, you would have this in your page

––––––––––––––––––––
|      Header      |
|------------------|
|                  |
|        Div       |
|   with limited   |
|      height      |
|                  |
––––––––––––––––––––

Note that this method will make your header appear constantly (unless the header+div is greater than window size, which would cause two scrollbars), since the header's not actually being scrolled past.

Answer 4

It will take some work, but how about creating your own (or using a third party) scrollbar instead of using the scroll bar functionality provided by the browser? if for example you make the main section hide the overflow, and then control the top position with the custom scroll bar you may be able to achieve what you want.

Answer 5

You can move the scrollbars with jquery and some javascript. On this example I use a jquery animation to gradually scroll down:

//move the scroll 800 pixels down in 200 milliseconds
$('html,body').animate({scrollTop: 800}, 200, "swing");

In order to stylize scrollbars, you can use this css:

body {
  scrollbar-face-color: #FDCF66;
  scrollbar-highlight-color: #FDCF66;
  scrollbar-3dlight-color: #FDCF66;
  scrollbar-darkshadow-color: #FDCF66;
  scrollbar-shadow-color: #FDCF66;
  scrollbar-arrow-color: #FDCF66;
  scrollbar-track-color: #FDCF66;
}

This is what these colors mean (source):

I'm not sure this is standard CSS, though, so some navigators might not support it.