Scroll bar

from Wikipedia, the free encyclopedia
Display of text with horizontal and vertical scroll bars

A scroll bar - even scroll bar (from English scrollable ), scroll bar or slider bar called - is a control of a graphical user interface to perform and illustrate the scrolling (English scrolling ). Scroll bars are used to move the visible section of the displayed content, for example text or a graphic . There are horizontal scroll bars to move the section left or right, and vertical scroll bars to move it up or down. Both variants are operated in the same way. Depending on the requirements, one of the two or both variants are displayed at the same time.

Presentation and components

The scroll bar is a rectangular area that is displayed under the content in the case of the horizontal scroll bar. A vertical scroll bar is usually placed to the right of the content. The following explanations relate to a horizontal scroll bar; they apply analogously to a vertical scroll bar when the dimensions are reversed.

Usually a horizontal scroll bar spans the width of the pane. In some cases, other controls, such as tabs, are placed next to the scroll bar at the bottom . The height of the scroll bar is significantly smaller than its width and independent of the size of the section. The height is only chosen so large that an acceptable operation of the control element is possible in order to lose as little display area as possible for the actual content. If the width of the entire content does not exceed the current width of the section, the scroll bar is grayed out ( deactivated ) or, alternatively, completely removed.

A scroll bar consists of various elements for which the names - in both German and English - vary greatly. The appearance of these elements is explained below and the most common German and English names are listed.

  • Scroll arrow: As a rule, there is an arrow symbol with the function of a button at the left and right ends of the scroll bar .
  • Scroll box, thumb , scroller: From the rest of the part, the area of ​​the scroll bar is usually set off by a darker representation, often shown similar to a slider .
  • Scroll shaft : Area to the left and right of the scroll bar.

The current position of the section is shown by the position of the scroll box, i.e. the slider, within the scroll bar. That is, the width of the shaft to the left and right of the scroll box shows how much invisible content is left in that direction. The width of the scroll box itself indicates how much of the content can currently be seen.


In addition to displaying the current position, the scroll bar is used to control the scrolling. This can be done in various ways using the mouse , a touchpad or touchscreen :

  • By clicking on one of the scroll arrows the cutout moves in small steps to the left or right or up or down. If the mouse button is held down while the mouse pointer remains on one of the scroll arrows, the scrolling is carried out continuously after a short delay.
  • By clicking on the shaft of the scroll bar on the left or right or above or below the scroll field, the visible image section is shifted page by page in the corresponding direction - so that the section is completely or almost completely filled with new content without content being skipped.
  • By dragging the scroll box to the new position you want. The mouse pointer does not have to stay exactly on the scroll bar, but only in a more or less large area next to it, depending on the program. If you leave this area, the scroll box jumps back to the original position.

The scrolling can often be done alternatively via the keyboard or the mouse wheel . In some programs (e.g. Explorer, Editor, Adobe Reader in Windows 10) a right click on the scroll bar opens a menu, in some programs a middle click on the shaft places the scroll field at the clicked point (e.g. LibreOffice, jEdit) .

Individual evidence

  1. Michael-Alexander Beisecker: The lexicon of PC technical terms. Verlag für deutsche Wirtschaft, Bonn 2005, ISBN 3-8125-0592-4 , page 310 ( online )
  2. Scroll field
  3. a b About Scroll Bars (English) - MSDN , 2016
  4. Mac Developer Library: OS X Human Interface Guidelines . Page 173 ( PDF )
  5. Tim O'Reilly, Valerie Quercia: X Users Guide Motif R5: Motif Edition. O'Reilly Media, Sebastopol 1993, ISBN 1-56592-015-5 , page 276 ( online )
  6. ^ Christiane Rudolf: Handbook Software Ergonomics. Page 38 ( PDF )
  7. Use menus, buttons, scroll bars, and check boxes