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

Question

我正在尝试设置一个适用于Chrome和Safari的自定义滚动条.我试过以下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;
}

然而,width在-webkit-scrollbar-thumb被忽略.如上所述,我希望拇指比轨道更薄.

似乎我可以通过在-webkit-scrollbar-thumb3px上设置与轨道颜色相同的边框来伪造宽度,但是这仅适用于不透明的背景颜色,我需要它以如上所述的轨道使用透明颜色.

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

Answer 1

你是正确的,WebKit忽略滚动条拇指上的宽度声明.它也在轨道上忽略了它.

使用a的问题border在于它在拇指内绘制边框,因此如果你只是制作颜色transparent,它将无法工作.

解决方案是更改背景附加的位置.默认情况下,背景在边框下方延伸,如上所述.您可以使用该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没有高级边框半径实现,因此圆角不可见.