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被忽略。如上所述，我希望拇指比轨道更薄。

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

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

Answer 1

你是正确的，WebKit忽略滚动条拇指上的宽度声明。它也会在赛道上忽略它。

使用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没有高级边框半径实现，因此圆角不可见。

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

1 个答案: