我正在设计一个在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;
}
这在Chrome中正常工作,但Safari不具有高级的border-radius实现,因此圆角不可见.
