Custom webkit scrollbar position

Question

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!

Answer 1

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.

Answer 2

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>