About Scrollbar Properties
= Index DOT Css by Brian Wilson =

  Main Index | Property Index | CSS Support History | Browser History  

Positioning Properties
scrollbar-face-color | scrollbar-arrow-color | scrollbar-base-color
scrollbar-shadow-color scrollbar-darkshadow-color
scrollbar-highlight-color | scrollbar-3dlight-color | scrollbar-track-color

What Do They Do?
Scrollbars are an essential part of the continuous visual media user experience. Continuous rendering allows content to be rendered within a "virtual viewport" - allowing only a portion of the actual content to be revealed at any given time. The scrollbar widget controls allow this viewport to be moved around the entire document contents.

Scrollbar widgets usually consist of a set of directional arrows at either end of the scrollbar, a scrollbar slider object, and a "tray" or "track" area that the slider object can move through. The arrows allow the viewport to be moved in the direction indicated by the arrow, either by a pointing device such as a mouse, or possibly through the use of keyboard directional controls (arrows, PGUP/PGDN.) The scrollbar slider widget, however, is generally only directly controllable using a pointing device.

The slider element itself and the "tray" or "track" that it resides in also serve another purpose. They represent a visual analogue for the visual area represented by the viewport compared to the actual size of the document being rendered. The length of the scrollbar tray will always be a static size (eg: the vertical or horizontal size of the viewport), but the length of the scrollbar slider in the tray is a direct ratio of the viewport length relative to the overall document length.

Hopefully, that previous description was not TOO confusing... perhaps the best way to illustrate the components of a scrollbar is through illustrations.
Diagram: The Components of a Scrollbar

a color-coded legend of the components of a scrollbar
Diagrams: The Scrollbar Properties
The best way to illustrate which parts of the scrollbar each scrollbar property affects is to show examples. The following images show in dark red the effect that each scrollbar property will have on a scrollbar. Note that the scrollbar is blown up to larger than its default size.

Default Scrollbar Appearance (on my system)
no scrollbar CSS applied

scrollbar-face-color CSS applied

scrollbar-arrow-color CSS applied

scrollbar-base-color CSS applied

scrollbar-shadow-color CSS applied

scrollbar-darkshadow-color CSS applied

scrollbar-highlight-color CSS applied

scrollbar-3dlight-color CSS applied

scrollbar-track-color CSS applied
Related Sites
Browser Reference: Microsoft MSDN

Boring Copyright Stuff....