How to put a Scrollbar at the Top and the Bottom of a Large Page Element - JavaScript Scrollbar to Top package blog

Contents

The Limitation of Web Page Scrollbars

Working Around the Limitation of the Scrollbar Sides

Scrolling the Large Page Elements with the Arrow Keys

Usage Example Code

Future Developments

The Limitation of Web Page Scrollbars

Scrollbars are useful on pages that have content that is larger than the space that is available. You can make scrollbars appear for large elements using the CSS overflow property. This may make scrollbars appear on the right or bottom of those page elements.

The problem is that if a page element is too wide or too tall, a scrollbar on the right or at the bottom of a page element may not be seen by the user, causing a usability problem.

This problem may be seen for instance when you want to display a long programming code sample and some lines of the code have too many characters, making the the page element containing the code exceed the available element width.

Working Around the Limitation of the Scrollbar Sides

The current limitation of these scrollbars is that you are not able to tell browsers to put the bars at left or top side of the element to be scrolled.

One solution for this problem is to insert an additional element at the left or top of the large page element. That additional element would have the same width or height of the large element, so it shows its own scrollbar.

That is basically what the Scrollbar To Top object does. It adds a scrollbar element at the top of the large element.

Additionally it synchronizes both the large element and the scrollbar element, so when one scrolls, the other also scrolls to the same position.

Scrolling the Large Page Elements with the Arrow Keys

When a large element does not fit in its container area, scrollbars appear and the larger element appears clipped.

The user can use the scrollbars at the top or bottom to scroll the content and view the rest of the content which until then was invisible.

However, for long content with toolbars at the top or bottom, if you scroll the page vertically, the scrollbars move out of sight, so there is no way to use the scrollbars to scroll the content.

An alternative way to scroll the content is for instance to let the user use the arrow keys. This Scrollbar To Top object supports that possibility.

To make it work the content must get the keyboard focus. This is achieved by setting the tabindex property of the large content container. Then the object can set the keyboard focus of the container when the user moves the mouse over the content element.

Usage Example Code

The usage of this object is very simple. Just create one instance of the object and then attach a scrollbar to the large page element.

First load the object class definition:

 <script type="text/javascript" src="scrollbarToTop.js"></script>

Define the large page element in your page:

 <div id="content" style="width: 3000px">Large content area!</div>

Create the scrollbar object:

 <script type="text/javascript"><!--

 var sb;

 sb = new ML.content.scrollbarToTop();

Configure the keyboard navigation support. Set the tabIndex variable to a negative number if you do not want to automatically give the keyboard focus to the large page element when the user drags the mouse over it.

 sb.tabIndex = 0;

Attach the scrollbar to the large page element:

 sb.addTopScrollbar('content');

 // --></script>