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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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 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.
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.
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.
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.
A computer mouse is a hand-held pointing device that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface of a computer.
In computing, a pointing device gesture or mouse gesture is a way of combining pointing device or finger movements and clicks that the software recognizes as a specific computer event and responds in a manner particular to that software. They can be useful for people who have difficulties typing on a keyboard. For example, in a web browser, a user can navigate to the previously viewed page by pressing the right pointing device button, moving the pointing device briefly to the left, then releasing the button.
A pointing device is an input interface that allows a user to input spatial data to a computer. CAD systems and graphical user interfaces (GUI) allow the user to control and provide data to the computer using physical gestures by moving a hand-held mouse or similar device across the surface of the physical desktop and activating switches on the mouse. Movements of the pointing device are echoed on the screen by movements of the pointer and other visual changes. Common gestures are point and click and drag and drop.
A trackball is a pointing device consisting of a ball held by a socket containing sensors to detect a rotation of the ball about two axes—like an upside-down mouse with an exposed protruding ball. Users roll the ball to position the on-screen pointer, using their thumb, fingers, or commonly the palm of the hand while using the fingertips to press the mouse buttons.
Mouse chording is the capability of performing actions when multiple mouse buttons are held down, much like a chorded keyboard and similar to mouse gestures.
A touchpad or trackpad is a pointing device featuring a tactile sensor, a specialized surface that can translate the motion and position of a user's fingers to a relative position on the operating system that is made output to the screen. Touchpads are a common feature of laptop computers as opposed to using a mouse on a desktop, and are also used as a substitute for a mouse where desk space is scarce. Because they vary in size, they can also be found on personal digital assistants (PDAs) and some portable media players. Wireless touchpads are also available as detached accessories.
A text box, text field or text entry box is a control element of a graphical user interface, that should enable the user to input text information to be used by a program. Human Interface Guidelines recommend a single-line text box when only one line of input is required, and a multi-line text box only if more than one line of input may be required. Non-editable text boxes can serve the purpose of simply displaying text.
A screen magnifier is software that interfaces with a computer's graphical output to present enlarged screen content. By enlarging part of a screen, people with visual impairments can better see words and images. This type of assistive technology is useful for people with some functional vision; people with visual impairments and little or no functional vision usually use a screen reader.
In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.
Point and click are the actions of a computer user moving a pointer to a certain location on a screen (pointing) and then pressing a button on a mouse, usually the left button (click), or other pointing device. An example of point and click is in hypermedia, where users click on hyperlinks to navigate from document to document.
Mission Control is a feature of the macOS operating system. Dashboard, Exposé, and Spaces were combined together and renamed Mission Control in 2011 with the release of Mac OS X 10.7 Lion. Exposé was first previewed on June 23, 2003 at the Apple Worldwide Developers Conference as a feature of the then forthcoming Mac OS X 10.3 Panther.
A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, GTK, and Cocoa, contain a collection of controls and the logic to render these.
In computer displays, filmmaking, television production, and other kinetic displays, scrolling is sliding text, images or video across a monitor or display, vertically or horizontally. "Scrolling," as such, does not change the layout of the text or pictures but moves the user's view across what is apparently a larger image that is not wholly seen. A common television and movie special effect is to scroll credits, while leaving the background stationary. Scrolling may take place completely without user intervention or, on an interactive device, be triggered by touchscreen or a keypress and continue without further intervention until a further user action, or be entirely controlled by input devices.
The Option key is a modifier key present on Apple keyboards. It is located between the Control key and Command key on a typical Mac keyboard. There are two Option keys on modern Mac desktop and notebook keyboards, one on each side of the space bar.
The Apple Mouse is a multi-control USB mouse manufactured by Mitsumi Electric and sold by Apple Inc. It was announced and sold for the first time on August 2, 2005, and a Bluetooth version was available from 2006 to 2009. Before the Mighty Mouse, Apple had sold only one-button mice with its computers, beginning with the Apple Lisa 22 years earlier. The Mighty Mouse supported two buttons, and a miniature trackball for scrolling.
A menu bar is a graphical control element which contains drop-down menus.
A mouse button is an electric switch on a computer mouse which can be pressed (“clicked”) to select or interact with an element of a graphical user interface.
The Magic Mouse is a multi-touch mouse that is manufactured and sold by Apple. It was first sold on October 20, 2009. The Magic Mouse is the first consumer mouse to have multi-touch capabilities. Taking after the iPhone, iPad, iPod Touch, and multi-touch trackpads, the Magic Mouse allows the use of gestures such as swiping and scrolling across the top surface of the mouse to interact with desktop computers. It connects via Bluetooth and runs on two AA batteries. Apple includes two non-rechargeable batteries in the box. Until 2016, Apple sold a battery charger which could charge two AA batteries, suited for the Magic Mouse. Like its predecessor, the Mighty Mouse, the Magic Mouse is capable of control-clicking without requiring the key combination.
In computing, a pointer or mouse cursor is a symbol or graphical image on the computer monitor or other display device that echoes movements of the pointing device, commonly a mouse, touchpad, or stylus pen. It signals the point where actions of the user take place. It can be used in text-based or graphical user interfaces to select and move other elements. It is distinct from the cursor, which responds to keyboard input. The cursor may also be repositioned using the pointer.
|Look up scrollbar in Wiktionary, the free dictionary.|