Unable to set the width of webkit-scrollbar-thumb

Question

I am trying to style up a custom scrollbar that works in Chrome and Safari. I’ve tried the following CSS:

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

::-webkit-scrollbar-track {
    background-color: rgba(100, 100, 100, .5);
    width: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border-radius: 9px;
    width: 9px;
}

However the width on the -webkit-scrollbar-thumb is being ignored. I would like the thumb to be thinner than the track, as above.

It appears that I can fake the width by setting a border on the -webkit-scrollbar-thumb of 3px with the same colour as the track, however this only works with an opaque background colour, and I need it to work with a transparent colour for the track as above.

Example jsfiddle: http://jsfiddle.net/L6Uzu/1/

Answer 1

You are correct that WebKit ignores the width declaration on the scrollbar-thumb. It also ignores it on the track.

The problem with using a border is that it draws the border within the thumb, so if you just make the colour transparent, it will not work.

The solution is to change where the background is attached. By default the background extends under the border, as mentioned. You can use the background-clip property to change this, so that it only extends to the edge of the padding box instead. Then you just need to make a 3px transparent border, then Bob’s your uncle:

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

See http://jsfiddle.net/L6Uzu/3/

This works correctly in Chrome, but Safari doesn’t have as advanced a border-radius implementation, so the rounded corners are not visible.