36

我正在尝试设计一个适用于 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;
}

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

看来我可以通过在-webkit-scrollbar-thumb3px 上设置与轨道颜色相同的边框来伪造宽度，但这仅适用于不透明的背景颜色，并且我需要它与上述轨道的透明颜色一起使用。

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

4

1 回答 1

93

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

使用 a 的问题border是它在拇指内绘制边框，所以如果你只制作 color 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 没有更高级的边框半径实现，因此圆角不可见。

于 2013-05-30T06:25:54.047 回答