应用边界半径到滚动条与:: - webkit滚动CSS3 [英] Apply Border-Radius To Scrollbars With ::-webkit-scrollbar CSS3

问题描述

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

Doesn't need to be cross-browser at the moment, just webkit. I'm familiar with the ::-webkit-scrollbar styling ability, but how can I use that or javascript to make the scrollbars respect the border-radius of elements?

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

I've got A div with with border radius:

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

如何使滚动条遵循元素的border-radius？即使它需要javascript。 （我已经尝试过LionBars插件和jScrollPane，结果是可疑的）

How can I make the scrollbars obey the border-radius of their element? Even if it requires javascript. (I've already tried the LionBars plugin and jScrollPane, results were pathetically buggy)

谢谢！

推荐答案

希望本示例帮助您： http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combination.html

我想你错过了这些事情：

I think you have missed these things:

::-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/

for better understanding you can follow this fiddle: http://jsfiddle.net/Sfy9p/3/

这篇关于应用边界半径到滚动条与:: - webkit滚动CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！