JS Classes
Icontem

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

Recommend this page to a friend!
  All package blogs All package blogs   JavaScript Scrollbar to Top JavaScript Scrollbar to Top   Blog JavaScript Scrollbar to Top package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to put a Scrollba...  
  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  

Author:

Posted on:

Package: JavaScript Scrollbar to Top

Sometimes you need to display content inside a page element that may be too wide to fit in the available space.

A scrollbar may appear automatically at the bottom of the wide page element, but if the content is also very tall, like for instance when you have a long article, the user may not see the bottom scrollbar, and so he may not be able to scroll the content sideways.

Read this article to learn about a solution to make a scrollbar also appear at the top of the wide page element.




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.

Example of a wide page element with a scrollbar at the top and bottom

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>

Future Developments

Currently this object can only add a scrollbar at the top of a large page element. It may be useful to also support adding scrollbars to the left of the element.

The support for using arrow keys to scroll the large page element is useful as long as the user is aware that it exists. If the user is not aware, it may be useful to show a tooltip message telling about it when the user drags the mouse over the content.

Other methods of scrolling the content using the mouse or even dragging the finger on a touch screen may also be useful.

If you have any other feature suggestions or questions about this object, please post a comment to this article.


You need to be a registered user or login to post a comment

21,685 JavaScript developers registered to the JS Classes site.
Be One of Us!

Login Immediately with your account on:

FacebookGmail
HotmailStackOverflow
GitHubYahoo


Comments:

1. Scrollbar appearance - goodbee (2013-10-30 14:03)
Custom scrollbar appearance... - 0 replies
Read the whole comment and replies




  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  
  All package blogs All package blogs   JavaScript Scrollbar to Top JavaScript Scrollbar to Top   Blog JavaScript Scrollbar to Top package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to put a Scrollba...