SCROLLBAR




Definition

A scrollbar is an interaction technique in which continuous text, pictures, or any other content can be scrolled in four directions (up, down, left, or right) on a computer display, window, or viewport.
More Information

Timeline

Xerox Star. Time: Between 1981 and 1982

Xerox Star

+ and – buttons allowed for scrolling by pages. And scroll arrows pointed inwards in the direction the content would move based on user studies. The thumb was a fixed size diamond.

Apple Lisa. Time:1983

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

The Macintosh Time: 1984

In 1984, the Macintosh had a light gray rectangle thumb. Arrows would scroll a single unit upon one click or auto repeat upon continuous press. Page buttons were removed. Upon pressing the thumb, dragging it would bring it to that particular point.

Windows Time:1985

NeXTstep Time:1989

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.

Win 3.0 Time:1990

Mac OS 8 Time:1997

Win XP Time:2001

Mac OS 2001 Time:2001

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

IOS(iphone/ipad) Time:2007

In 2007, the iPhone and iOS included a regular scrollbar in the web browser and other applications.Beisdes,a scrollbar of letters was provided to jump through content.

ALPHABET SCROLL

OS X Lion Time:2011

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. Apple introduced “natural scrolling,”concept, 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. For exmaple, if the user’s fingers move up the trackpad, the content on the page goes up.

Ways to Control a Scrollbar

Scroll Wheel(the white wheel)

Thumb Dragging



Clicking the Trough


Touchpad



Srollbars in Mobile Websites?



use one finger scrolling, scrollbars will appear.

How to Customize your scrollbar in Browsers(chrome)?





1.add code to your css file

::-webkit-scrollbar-track-piece{} ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{} ::-webkit-scrollbar-thumb:hover{}

2.Chrome Web Store

rescroll setting