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

Question

目前不需要跨浏览器，只需使用webkit。 我熟悉::-webkit-scrollbar的样式设置功能，但是如何使用该功能或​​javascript使滚动条遵守元素的边界半径？

我有一个具有边界半径的div：

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

如何使滚动条服从其元素的边界半径？ 即使需要javascript。 （我已经尝试过LionBars插件和jScrollPane，结果可悲的是有问题）

谢谢！

Answer 1

希望本示例对您有所帮助： 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/

Answer 2

如果您想使用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);