使用 ::-webkit-scrollbar CSS3 将 Border-Radius 应用于滚动条答案

【问题标题】：Apply Border-Radius To Scrollbars With ::-webkit-scrollbar CSS3使用 ::-webkit-scrollbar CSS3 将 Border-Radius 应用于滚动条
【发布时间】：2012-03-05 14:37:08
【问题描述】：

目前不需要跨浏览器，只需要 webkit。我熟悉 ::-webkit-scrollbar 样式功能，但是如何使用它或 javascript 使滚动条尊重元素的边框半径？

我有一个带边框半径的 div：

#tagBox {
    border-radius: 20px;
}
#tagBox::-webkit-scrollbar-??? {
    ???: ???
}

如何使滚动条服从其元素的边框半径？即使它需要javascript。（我已经尝试过 LionBars 插件和 jScrollPane，结果非常糟糕）

谢谢！

【问题讨论】：

标签： javascript scrollbar css

【解决方案1】：

如果你想用 javascript 来做：

var ss = document.styleSheets[0];
ss.insertRule('::-webkit-scrollbar {width: 13px;height: 13px;}', 0);
ss.insertRule('::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;}', 1);
ss.insertRule('::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}', 2);

【讨论】：

【解决方案2】：

希望这个例子对你有帮助：http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

我认为你错过了这些事情：

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

为了更好地理解你可以按照这个小提琴：http://jsfiddle.net/Sfy9p/3/

【讨论】：