Custom webkit scrollbar position

5
votes

I have a custom webkit scrollbar like this:

::-webkit-scrollbar{
  background: transparent;
  width: 10px;
}
::-webkit-scrollbar-thumb{
  background: #999 !important;
}

So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...

So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.

Or, if possible that I can make the scrollbar offset in a div.

Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.

Thanks in advance!

3
scrollbar

3 Answers

3
votes

If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:

.superDiv{
  height:100%;
  width:90%;
  position:fixed;
}
body{ overflow: hidden }

The second question - you're looking for 

::-webkit-scrollbar-track-piece {
  background:transparent;
}

But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.

2
votes

Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:

<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
0
votes

An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;

To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/

If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 5px;
    right: 20px;
    overflow: scroll;
}
::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}
::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }

Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/