Scrollbar

Examples of horizontal and vertical scrollbars around a text box

A scrollbar is a graphical control element with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport. It was also known as a handle in the very first GUIs.

Scrollbars are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. They usually appear on one or two sides of the viewing area as long rectangular areas containing a bar (or thumb) that can be dragged along a trough (or track) to move the body of the document as well as two arrows on either end for precise adjustments. The "thumb" has different names in different environments: on the Macintosh it is called a "scroller"; on the Java platform it is called "thumb" or "knob"; Microsoft's .NET documentation refers to it as "scroll box" or "scroll thumb"; in other environments it is called "elevator", "quint", "puck", "wiper" or "grip". Additional functions may be found, such as zooming in/out or various application-specific tools. Depending on the graphical user interface, the size of the thumb can be fixed or variable in size; in the later case of proportional thumbs, its length would indicate the size of the window in relation to the size of the whole document. While proportional thumbs were available in several GUIs including GEM, AmigaOS and PC/GEOS even in the early 1980s, Microsoft provided them not before the release of Windows 95. A proportional thumb that completely fills the trough indicates that the entire document is being viewed, at which point the scrollbar may temporarily become hidden. The proportional thumb can also sometimes be adjusted by dragging its ends. In this case it would adjust both the position and the zooming of the document, where the size of the thumb represents the degree of zooming applied.

Non-proportional scrollbars in MacOS from 1996, before the scrollbar length became proportional to the amount of content present.

A scrollbar should be distinguished from a slider which is another object that works in a similar fashion, the difference being that the slider is used to change values, and does not change the display or move the area that is shown.

Manipulation

While dragging the thumb is historically the traditional way of manipulating a scrollbar, a scroll wheel may also be used. In addition, the arrow buttons may be clicked to scroll a small amount, or the trough above or below the thumb for a larger amount. Clicking the trough, scrolling would stop once the thumb has reached the position of the mouse pointer, whereas clicking the arrow buttons would continue scrolling until one of the scroll limits has been reached. Sometimes, both arrow buttons appear next to each other for quick, precise manipulation without having to drag the thumb or move the mouse great distances to the other arrow (this was offered as an option in Mac OS 8.5); one of them may also be duplicated so as to show at both ends of the bar, providing familiarity for those used to both separate and adjacent buttons. These arrow buttons existed until Mac OS X 10.7 where they were dropped in favour of trackpad gestures and scroll-wheel mice.

Another system for manipulating them is to look at which mouse button was pressed. For instance, a left-click on the down arrow might cause the window to scroll down, while a right click in the same place would scroll up (e.g. RISC OS), or the middle button could be used to place the thumb precisely. This form requires less fine motor skills, although it requires a multi-button mouse, and possibly a greater degree of GUI literacy.

Simultaneous 2D-scrolling

Special scroll-bar like graphical control elements allow panning around a two-dimensional space by simply moving a single rectangle in any direction on the plane. For example, the GtkScrollpane from GTK+ is implemented in the text viewers gv and ghostview.

Another example for simultaneous two-dimensional scrolling is an alignment program for protein sequences. Initially, the horizontal scroll-bar looks like a conventional one. But then the scroll-bar offers three additional features:

1. It provides an overview of the entire scene.
2. The height can be enlarged.
3. The knob can not only be moved left and right but also up and down for vertical scrolling.

In RISC OS dragging a scrollbar with the left mouse button operates in the usual way, but dragging with the right button causes the pointer to disappear and both scrollbars to be manipulated simultaneously. Many GUI operations in RISC OS perform a related but slightly different function when right clicked.

Customization

Trough marks in the vertical scrollbar during search in Google Chrome browser

The ability and specific methods needed to customize the look and function of scrollbars can vary significantly based on which operating system or software application you are attempting to customize. A common method of altering the look of the scrollbar in Web pages is to use CSS directives to change the scrollbar colors. These are non-standard and supported only by Microsoft Internet Explorer versions 5.x or higher and Opera. And in WebKit-based browsers, there are pseudo-elements called:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-button
• ::-webkit-scrollbar-track
• ::-webkit-scrollbar-track-piece
• ::-webkit-scrollbar-thumb
• ::-webkit-scrollbar-corner
• and ::-webkit-resizer

WebKit also provides many pseudo-classes to modify the style of scrollbars.

Scrollbars have also been enhanced to encode information about list entries. For example, Google Chrome introduces trough marks in the vertical scrollbar to indicate places in the document where a particular search term was found.

See also

• Scroll Lock
• Slider