css - 无法设置 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;
}

但是 -webkit-scrollbar-thumb 上的 width 被忽略了。如上所述，我希望拇指比轨道更细。

看来我可以通过在 3px 的 -webkit-scrollbar-thumb 上设置一个与轨道颜色相同的边框来伪造宽度，但这只适用于不透明的背景颜色，我需要它为轨道使用透明颜色，如上所述。

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

Answer 1

您是正确的，WebKit 忽略了滚动条缩略图上的宽度声明。它还会在轨道上忽略它。

使用 border 的问题在于它在拇指内绘制边框，因此如果您只是将颜色设置为透明，它将不起作用。

解决方案是更改背景的附加位置。如前所述，默认情况下背景会延伸到边框下方。您可以使用 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 实现，因此圆 Angular 不可见。