Form and function of a scroll bar


A scroll bar, often called lift, is a GUI component attached to a rectangular display area. The scroll bar scrolls the contents of the box with the mouse when the height or width of the zone is insufficient to display its entire contents.

The bar can be scrolled vertically downward or horizontally scrolling from left to right. The bars are usually found on the side windows and areas of multiline text.


A scroll bar is composed of a rectangle containing a sliding bar and arrows. Scroll bars are disposed on the side of the display area scrolling, or generally right below.

The slide bar usually has a length proportional to the displayed content, (proportional lift). Several old graphical user interface (GUIs) (Mac OS <9 , Windows 3.x ) were represented by a simple sliding bar square that gave no indication of the percentage of content displayed .

The arrows are disposed at either end of each slider, on either one end or on the slider itself. Bringing together the pair of arrows on the same piece can move an arrow to another with minimal mouse movement.

An alternative arrangement is to have a pair of arrows in the lower right end, where the horizontal and vertical bars are joined, and one arrow to the other end.

When the entire height or width of the content is displayed, the scroll bar is disabled. Several conventions are used to indicate this condition.


Most bars have three modes of interaction.

Drag and drop the slide bar scrolls the same time the contents of the display area, provided that the processing capabilities of the computer allow.

During sliding, it is not necessary to keep the pointer on the bar, however some systems (like Windows) cancel the scroll if you move away a bit from the bar. The same effect is often accessed with the arrow keys.

Mouse Wheel

The scroll is a simple and common interaction. Since the 2000s, many mice are equipped with a wheel whose rotation causes a vertical scroll of the pointed area.

Scroll bars are used to shift the visible section of content shown, for example, a text or a graphic. There are horizontal scroll bars to move from left or right and vertical scroll bars to move upward or downward shift. The operation of both versions is similar.

Representation and components

The scroll bar is located in a rectangular area that is shown in the case of the horizontal scroll bar below the content. A vertical scroll bar is placed as a rule on the right of the content.

The following explanations refer to a horizontal scroll bar, they apply analogously under permutation of the vertical dimensions.

Normally, a horizontal scroll bar extends over the entire width of the cutout. In some cases, other control elements are placed next to the scroll bar at the bottom, such as tabs. The height of the scroll bar is considerably smaller than its width and regardless of the size of the cutout.

The height is usually great, so that an acceptable operation of the control element is possible to lose as little display space for the actual content. If the width of the entire content does not exceed the current width of the cut, the scroll bar is disabled or alternatively removed entirely.

About these ads