Changing the scrollbars' style

Question

Is possible to change scrollbars' style for all browsers? If it is, how?

Answer 1

It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.

Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.

Answer 2

Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.

---

Vendor Extensions

Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.

An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".

WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/

Example:

::-webkit-scrollbar
{
    width: 13px;
    height: 13px;
}

Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.

---

Custom Scrollbars

Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.

It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.

This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/

Answer 3

Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.

Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.

You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.