Scrollbar
A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction 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 that can be dragged along a trough 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 no 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, 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 pointer about 100 pixels away from the thumb while dragging it will reset the scrolling position to prior. This is useful to temporarily return to a previous section of the page without losing the current position.