Menu
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!
895
The scrollbar width First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones. With that set, we can style the scrollbar itself.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
::-webkit-scrollbar. Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.
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/
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
