Scrollbar

Examples of horizontal and vertical scrollbars around a text box

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time. It offers a solution to the problem of navigation to a known or unknown location within a two-dimensional information space. It was also known as a handle in the very first GUIs. They are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. The user interacts with the scrollbar elements using some method of direct action, the scrollbar translates that action into scrolling commands, and the user receives feedback through a visual updating of both the scrollbar elements and the scrolled content.

Although scrollbar designs differ throughout their history, 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. This can be placed vertically, horizontally, or both in the window depending on which direction the content extends past its boundaries. Two arrows are often included on either end of the thumb or trough for more precise adjustments. The "thumb" has different names in different environments: on the Mac OS X 10.4 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"; in certain environments where browsers use agnostic language to the scrollbar terminology, the thumb is referred to as the 'pea' for vertical movement of the bar and still use 'puck' for horizontal movement.

Additional functions may be found, such as zooming in/out or various application-specific tools. Depending on the GUI, 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, indicated by the full track. While proportional thumbs were available in several GUIs, including GEM, AmigaOS and PC/GEOS, even in the mid 1980s, Microsoft did not implement them until 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, such as in Sony Vegas, a non-linear video editing software package. 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.

A scrollbar should be distinguished from a slider which is another visually similar yet functionally different object. The slider is used to change values, but does not change the display or move the area that is shown as a scrollbar does.

History and progression

In 1974, moving the cursor to the left margin while using Bravo changed its shape to a double-headed arrow to allow for scrolling. Pressing the left or top red button scrolled the content up, and the line next to the cursor went to the top of the window. Pressing the right or bottom blue button scrolled the content down, and the line at the top of the window went down to the cursor. Holding down the middle yellow button changed the cursor to a thumb, allowing for jumping to that percentage of the document with an indicator of current placement.

In 1977, Smalltalk included a stable scrollbar on the left side of the focus window. Clicking at the right half of the scrollbar moved the content up, and the left half moved the content down. The center thumb of the bar could be dragged smoothly and showed the percentage of the content visible; the first proportional scroll bar.

In 1980, Interlisp had a scrollbar that appeared on the left side of the window as the cursor moved towards the left. The bar's shaded thumb showed the percentage of content visible and was controlled by the middle button. The left button scrolled up to move the selected position to the top edge of the window, and the right button scrolled down to move the top edge of the window to the selected position.

Between 1981 and 1982, the Xerox Star moved the scrollbar to the right to get it out of the way and reduce visual clutter. Scroll arrows pointed inwards in the direction the content would move based on user studies, and + and – buttons allowed for scrolling by pages. The thumb was a fixed size diamond, independent of how much of document is visible. Clicking in the thumb elevator region would jump to that part of document.

In 1983, the Apple Lisa had arrows pointing up and down, page buttons, and a fixed size thumb.

In 1984, the Macintosh had a light gray rectangle with a "scroll box" thumb, "gray area" track, and arrows pointing in opposite directions towards the content that would be exposed when the respective arrow was pressed. Arrows would scroll a single unit upon one click or auto repeat upon continuous press. Page buttons were removed, and the elevator track could be clicked in instead to move to the next section. Upon pressing the thumb, dragging it would bring it to that particular point unless movement was made far out of the scrollbar before release, aborting the action. An empty scrollbar was displayed when a window was not in focus or if the entire document was visible within the window.

In 1985, GEM used a proportionally-sized "scroll box" thumb, but otherwise operated identically to the Macintosh. The net result was a modern scrollbar that looked and felt no different from the scrollbar in Windows today. GEM allowed the mouse to be moved far away from the scrollbar after clicking and holding, to reduce hand-eye coordination problems. AmigaOS followed later in the year, also with proportionally-sized scroll boxes.

Also in 1985, Viewpoint used the right button to move content by percent or by window rather than by page.

In 1988, Open Look created an elevator thumb with arrow keys directly on it. Clicking on the track moved by pages, and auto repeat would push the pointer along. Cable anchors were placed at the beginning and end of the document, and the center of the elevator could be dragged.

In 1989, NeXT moved the scrollbar back to the left side of the window. The thumb was proportionally sized with arrows together at the bottom of the bar. Actions auto repeated, and the alt-key would move content by window. The thumb could be dragged, and using the alt-key while dragging would slow its movement.

In 1997, the PalmPilot included a conventional scrollbar where text extended past screen boundaries with use of both a draggable thumb and arrows that could be tapped with a stylus. It also had two physical buttons for scrolling up and scrolling down respectively.

In 2001, Mac OS X 10.0 used a proportional thumb and moved both arrow buttons to the bottom of the bar.

In 2007, the iPhone and iOS included a regular scrollbar in the web browser and other applications, though it was only for output and could not be interacted with. In contacts, a scrollbar of letters was provided to jump through content.

In 2011, Mac OS X 10.7 removed the buttons from the end of the bar and was designed to look more like the iOS scrollbar. With the same release of Mac OS X 10.7, Apple introduced "natural scrolling," which means that the screen moves in the same direction as the user's fingers are moving when they use the two finger scroll gesture. If the user's fingers move up the trackpad, the content on the page goes up, allowing the user to read content further down the page, and vice versa.

In the 2015 version of Microsoft Word for Macs, disappearing scrollbars were introduced. The placement within a document was not longer visible when the mouse was outside the bar area even if the window in question was in focus. The purpose of this change was to conform to Macs’ standard design practices of hiding the scrollbar when it is not immediately needed for information hierarchical purposes.

Usage

Thumb dragging

Dragging the thumb is historically the traditional way of manipulating a scrollbar. By moving the cursor over to the thumb on the screen and then pressing and holding, the thumb can be dragged. This is often done using either a trackpad or the left click button on a conventional mouse or touchpad. Moving the cursor while pressing down moves the scrollbar's thumb to see different sections of the page. On applications native to OS X 10.11 (and some previous OS X versions), scrollbars do not show up on the user interface until the user uses another scrolling technique, such as the two-finger scroll or using the arrow keys. Therefore, the user must scroll using one of these methods first, and then move their cursor over to the thumb, wherever it appears.

On Microsoft Windows, moving the mouse away too far from the thumb while dragging it will reset the scrolling position to prior.

Scroll wheel

A scroll wheel on a conventional mouse may also be used. Moving the wheel in a desired direction moves the content in the same direction. Most mice contain scroll wheels that only scroll up and down, but some mice contain scroll wheels that allow the user to scroll in any direction (up, down, left or right), including diagonal directions. While scrolling up and down, the direction in which the page scrolls in response to the direction that the user scrolls the scroll wheel can differ depending on the computer's scrolling settings.

Arrow keys

The arrow buttons on the keyboard may be clicked to scroll up, down, left, or right on a page. This scrolling technique usually results in the screen scrolling very slowly in comparison to the other scrolling techniques. Clicking the arrow buttons would result in the page continuing to scroll until one of the scroll limits has been reached.

Clicking the trough

The trough above or below the thumb can be clicked in order to immediately jump to that point on the page, or page-by-page for multipage content. After clicking the trough, scrolling automatically begins and then stop once the thumb has reached the position of the mouse pointer. This scrolling technique is faster than others and is best used when the user has to scroll through a lot of content at once, or when the user knows where exactly on a page they need to scroll to.

On-screen arrow buttons

Many applications, such as Microsoft Word and PowerPoint, contain scrollbars with on screen directional arrows for purposes of scrolling. Clicking on the arrows scrolls a small amount of the content, often single lines, at a time, and pressing and holding on them with the cursor continuously scrolls over more area on the page until released. 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 favor of trackpad gestures and scroll-wheel mice.

In BeOS, the on-screen scrolling buttons for both directions appear on both ends of the scroll bar. In several Microsoft Office programs, the additional buttons ⏪ and ⏩ can be used for per-page navigation.

Different mouse buttons

Another scrolling technique with scrollbars 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.

Windows touchpad

Additionally, some Windows-enabled machines have a scrolling mechanism on the side of their touchpad, as shown in the picture. To use this mechanism, a finger is placed on the scroll area and moved up and down or left and right in order to scroll around the page. Again, depending on the computer's scrolling settings, moving the finger in certain directions along these scrolling areas could result in different corresponding scrolling directions.

Mac trackpad

A more modern scrolling technique is using the two-finger scroll on a Mac trackpad. In this technique, the tips of two fingers from the same hand are placed on the surface of the trackpad and moved accordingly. If the user has their trackpad scrolling direction set to "natural," moving their two fingers toward the top of the trackpad will cause the page to scroll up towards the top of the page; conversely, moving their fingers toward the bottom of the trackpad will cause the page to scroll down towards the bottom. If the user "flicks" their fingers by moving their two fingers very quickly across the trackpad and then releasing their fingers, the page will continue to scroll in the direction in which they flicked until it eventually slows down and stops, either because one of the scroll limits is reached or because the scroll speed slows down so much that it eventually simply stops. This feature is called inertia.

Alternative designs

Many variations on the traditional scrollbar design and usage have been proposed or implemented. To avoid limiting window visibility with scrollbars while still allowing for functionality, the use of a software tether (thin line) associated with movement of the mouse pointer around the tether has been proposed. Similarly, the scrollbar can be directly placed within the content where it is useful, both decreasing space used and reducing required pointer movements.

The inclusion of visual and operational clues within the scrollbar display area can indicate which directions allow for scrolling movement as well as which interactions with the scrollbar are available. This can be a blank field to signal a list's end, disabling of scrolling buttons, and color changes in the scrollbar.

Some scrollbars include a visual position indicator to help determine where the scrolling action has gone or will go to in the content. For multipage content, an indicator of the current page number vs the total page number can be included next to the thumb as scrolling occurs, and wider scrollbars can include an overview of the entire page. In scrollbars like those used in phone contact lists made up of the letters of the alphabet, the letter corresponding to the current area can be displayed larger or highlighted in some way. While these are stable and provided by the application, some applications and search engines allow for the use of relevance markers provided or added by the user. These can be strictly visual or can automatically stop action within the scrollbar once each marker is reached. These can be emphasized with color or even sound to further assist the user in finding what they need within the content.

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.

Limitations and issues

Computer literate users are often familiar with scrollbars, but those with limited knowledge may not intuitively understand them, especially given more recent variations, without assistance. Regardless of literacy, multiple issues can be found across various types of scrollbars and their interactions. In terms of design, if the window size is already small, the visible content area will be further reduced by the presence of a scrollbar. While some more recent disappearing scrollbars help mitigate this problem, more traditional ones do not avoid it, especially when there are both horizontal and vertical bars present.

In terms of use, many common issues have to do with accuracy. Mapping between the scrollbar and display is linear, so accuracy of use is relative to the size of the content. Navigation through a smaller document is then simpler than navigation through a larger document. This also means that all portions of a document are emphasized equally, and importance of each portion is not recognized by use of the scrollbar.

There is not often an indication of where in the content a scroll has reached unless the scrolling action is stopped to view the content. This makes it difficult regardless of whether or not the user knows what they are looking for or the general organization of the content. Those that do have an indicator are limited by the predetermined settings in visibility, amount, and style. If attempting to scroll while performing an action such as highlighting, the scroll amount may not correspond to the desired amount, overshooting or prompting the user to reposition multiple times. Overshooting can also occur when attempting to position near the top or the bottom of a single page within a larger set. An attempted small scroll adjustment by the user may result in a larger one as the scrolling activates an automatic action jumping to the next page.

Studies

A 1986 report by William Buxton and Brad Myers tested different two-handed interactions, including scrolling, clicking, and resizing. In their study, clicking and resizing were done in parallel. Their first experiment called for participants to perform a selection/positioning task, and their second experiment requested that participants do a compound navigation/selection task. The study found that users can perform these tasks faster and in parallel when they use both hands, but not necessarily when they use both hands simultaneously. They also found that the more related the tasks were that they user was doing with each of their hands, the faster they performed the tasks they were asked to do.

See also

• Scroll lock
• Slider
• Interaction technique
• Scrolling

External links

• Hiding the scrollbar on an HTML page