Scroll Bars
The Horizontal and Vertical Scrollers enables scrolling boxes that visually complement your page design.
This method of navigation gives users the traditional scrolling controls such as arrows, drag bars, and even their mouse wheels. People with motor disabilities can use their tab keys to reach the scrolling controls and then, once a scrolling control has focus, the keyboard controls are activated enabling use of the four arrow keys—plus the spacebar, Home, End, Page Up, and Page Down keys.
The option to "Show All" on your page enables users to turn off the scrolling controls and expand all content to view all content.
Horizontal Scroller | Vertical Scroller | Top
|Features
- Choose from several style themes and control configurations—including graphical icons or pure text
- Scrolling type options include normal, looping, auto-reverse, and animated carousel
- All content accessible and visible when JavaScript is disabled
- Keyboard enabled scrolling
- Toggle feature to hide scroller controls and show all content
- Mousewheel support in modern browsers
- Passes automated Section 508 Accessibility check
- Passes WAI Accessibility checks (Priority 3)
- Search engine-friendly
Horizontal Scrollers
|
|
|
|
|
 Horzontal Scroll Bar HS-05
|
|
|
Horizontal Scroller | Vertical Scroller | Top
Browser support
- IE5.x (Windows and Mac)
- IE6.x (Windows)
- IE7.x and up (Windows)
- Firefox 1.5 and up (Windows and Mac)
- Opera 9.x and up (Windows and Mac)
- Safari (OS X Jaguar and higher)
- Degrades to a fully accessible content block in older browsers.
Vertical Scrollers
Vertical Scroller 1
(VSB-01)
Vertical Scroller 1
(VSB-01)
This scroller is a sample of the range of colors and styles avaiable. Vertical Scroll Bar VSB-1 is optimized for a black page background—but it can easily be edited if you'd like to use a different background color.
Click the Play button near the bottom of the scroll bar channel to scroll automatically. The Auto Mode is set to Reverse.
Browser support
IE5.x (Windows and Mac)
IE6.x (Windows)
IE7.x and up (Windows)
Firefox 1.5 and up (Windows and Mac)
Opera 9.x and up (Windows and Mac)
Safari (OS X Jaguar and higher)
Degrades to a fully accessible content block in older browsers.
Vertical Scroller 2
(VSB-02)
VSB-2 is optimized for a white page background.
Normal Auto Scroll mode option: Play button near the bottom of the scroll bar channel. The content will scroll to the end and then stop automatically.
Vertical Scroller 3
(VSB-03)
VSB 3 includes operating system-style scrollbars and is optimized for a white page background.
Click the Play button near the bottom of the scroll bar channe the content will scroll to the end and then stop automatically.
Vertical Scroller 4
(VSB-04)
VSB-4 will coordinate with virtually any page background color or texture.
Click the Play button near the bottom of the scroll bar channel the content will scroll to the end and then stop automatically.
Vertical Scroller 5
(VSB-05)
VSB-5 will coordinate with any page background color or texture.
The scroller is set to play on page load—after a 3.5 second delay. The scolling mode is set to normal, meaning the scroller will stop when it reaches the the end of the content. Mouseover Auto Pause and Mouseout Resume is enabled.
Vertical Scroller 6
(VSB-06)
VSB-6 will coordinate with any page background color or texture.
Scrolling options include:
Mouseover
Auto Pause and Mouseout Resume.
Carousel cycling (one slide at a time) with Auto Reverse, Carousel mode can be set to run once on load.
Use the Play button to replay the carousel or, alternatively, use the up and down buttons to manually cycle through each image.
Vertical Scroller 7
(VSB-07)
VSB-7 is minimally styled to allow you to easily integrate it into any type of layout. Controls are text-based. It can be set to Auto Scroll in normal mode. When the end is reached, scrolling stops.
This example hides all controls and presents content in a continuously looping news scroller. Users can, of couse, pause and resume by mousing over or out of the content. The mouse wheel is also functional and, as in all scrollers, the "Show All" link is present for total accessibility.
