css3 – 无法设置webkit-scrollbar-thumb的宽度

我正在设计一个在Chrome和Safari中使用的自定义滚动条.我尝试了以下CSS：

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

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

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

但是,-webkit-scrollbar-thumb的宽度被忽略.我希望拇指比轨道更薄,如上所述.

看起来我可以通过在3px的-webkit-scrollbar-thumb上设置与该轨迹相同颜色的边框来伪造宽度,但这只适用于不透明的背景颜色,我需要使用透明颜色如上所述.

示例jsfiddle：http://jsfiddle.net/L6Uzu/1/

解决方法

您是正确的,WebKit忽略scrollbar-thumb上的宽度声明.它也在轨道上忽略它.

使用边框的问题是它在缩略图中绘制边框,所以如果只是使颜色透明,它将无法正常工作.

解决办法是改变背景的位置.如上所述,默认情况下,背景在边框下方延伸.您可以使用background-clip属性来更改此选项,以使其仅扩展到填充框的边.那么你只需要制作一个3px的透明边框,那么Bob的你的叔叔：

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

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

这在Chrome中正常工作,但Safari不具有高级的border-radius实现,因此圆角不可见.