How do I add a margin to a CSS webkit scrollbar?

Question

Here's my site with the current webkit scrollbar: http://willwhitehead.com

I'd like to create a gap between the scrollbar and the right edge of the screen.

How do I achieve this?

Thanks in advance,

Will

Answer 1

There's yet another solution which might fit easily in everybody's project. If you use a transparent border as a margin and a box-shadow with inset to set it's color, you'd get the result you are hoping for.

For instance:

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px green;
    border: solid 3px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px red;
    border: solid 3px transparent;
}

This may be an ugly scrollbar, but it serves as an example to what I mean.

However, in Chrome, the transparent property won't work, so you would have to manually insert the color that would fit with the background, preferably, the background-color.