Styled Scroll Bars

These custom scroll bars are entirely made through CSS styling. Only WebKit currently supports this and all other browsers fall back on the default scroll bars.

Sample
Implementation
Code
History

Classes

lotusStyledScroll - the class that enables the styled scroll bars in WebKit browsers.

Basic Implementation

Add the lotusStyledScroll class to the node that needs styled scroll bars. All properties are vendor-prefixed (::-webkit-scrollbar for example) so non-WebKit browsers will not see a change.

Examples

Flyout

Sample HTML - styled scroll bar

CSS (base.css)

You will have to look at the base.css file (or the top sections of core.css and defaultTheme.css) to see the CSS for styled scroll bars.

November 14th 2011: Added documentation.