4umi.com/web/css/scrollbar

Keep your scrollbars

Useful CSS

The Internet Explorer and Konqueror browsers allow websites to modify the color scheme of their scrollbars, and webmasters have enthousiastically started writing code that makes the scrollbars blend in with their pages, thereby sometimes making the scrollbar difficult to use. It is perhaps just a question of taste, but the user must be the judge. Some scrollbar color schemes are simply laughable, faded or even camouflaged beyond recognition. These examples are from actual, some quite reputable websites, each with a white background just like this one. Perhaps you prefer this black contour.

Fortunately you can easily disable this functionality, either automatically for all pages using a custom style sheet or only for those pages where you choose to intervene with the scrollbar color bookmarklet.

Using a custom style sheet

To make sure the scrollbars of your browser keep their normal colours, no matter where you go and what sites you may come across, you can specify a so-called user style sheet with the !important declaration to override anything that a page may specify.

Download and save this stylesheet file mystyle.css, which contains the following lines:

html, body, textarea {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Now, you need to tell the browser about this new file. In IE, go to 'Tools' > 'Internet Options' and then click the 'Accessibility' button, in Konqueror look for the 'Stylesheets' tab. Enter the location where you have chosen to save this file in the corresponding dialog box. You may have to close and restart the browser before the effect takes place.

Using a bookmarklet

This link is not a link but a bookmarklet:

Scrollbarcolor Restore

When you click it, the scrollbars will have their default colors restored there and then. No content or functionality will be lost. To have this code available on other webpages, simply drag it to your Links bar. It contains the same color specifications as the custom style sheet, but executes only on pages where you activate it by clicking the bookmarklet.
For more on bookmarklets, how to bookmark them and their limitations, see our bookmarklets section.


This tip is a modified version of the one found at www.w3.org/Style/Examples/007/scrollbars.html.


The above white space ensures a scrolbar on this page.