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
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.
