Unable to set the width of webkit-scrollbar-thumb

by

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.

Leave a Comment