Horizontal and Vertical 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. Tab keys 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.

Features

• Several style themes and control configurations
• Scrolling 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
• Search engine-friendly

Horizontal Scrollers

Horizontal Scroll Bar HSB-01   Horizontal Scroll Bar HS-01 Show All	Horizontal Scroll Bar HS-02   Horizontal Scroll Bar HS-02 Show All	Horizontal Scroll Bar HS-03   Horizontal Scroll Bar HS-03 Show All	Horizontal Scroll Bar HS-04   Horizontal Scroll Bar HS-04 Show All	Horizontal Scroll Bar HS-05   Horizontal Scroll Bar HS-05 Show All	Horizontal Scroll Bar HS-06   Horizontal Scroll Bar HS-06 Show All	Horizontal Scroll Bar HS-07   Horizontal Scroll Bar HS-07 Show All

Scroll Left

Pause or Play

Drag

Scroll Right

This is an active scroller click on the arrows to activate. The top sample shows how the scroller appears when the page is activated. The bottom image is how the scroller appears when the [Show All or Expand All] option is selected.

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

Show All

Vertical Scroller 1 (VSB-01) This  scroller is a sample of the range of colors and styles available. 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 channel 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 scrolling mode is set to normal, meaning the scroller will stop when it reaches the the end of the content. Mouse over Auto Pause and Mouse out Resume is enabled.

Vertical Scroller 6 (VSB-06) VSB-6 will coordinate with any page background color or texture. Scrolling options include: Mouse over Auto Pause and Mouse out 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 course, 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.

up

scroll

Pause or Play

down

This is an active scroller click on the arrows to activate. Each page shows the design and describer the function of the scroller.

Horizontal Scroller  |  Vertical Scroller  | Top