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?

I've got A div with with border radius:

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

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)

Thanks!

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?

I've got A div with with border radius:

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

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)

Thanks!

• javascript
• scrollbar
• css

2 Answers 2

Hope this Example helps you: http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.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);
}

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

If you want to do it with 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);