color of scrollbars within the page

Question

Hi everyone,

I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).

I want

• the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.

AND

• to retain control over the color scheme of all elements on the page.

The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)

I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.

What are my options? My head hurts when I think of moving this entire page to Flash for this reason...

thanks in advance...

Answer 1

i would use jquery and a scrollable div.

Here are some resources to get you started. http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div

http://flowplayer.org/tools/demos/scrollable/vertical.html

http://logicbox.net/jquery/simplyscroll/vertical.html

Answer 2

Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:

If you use jQuery, try jScrollPane. If you use MooTools, try MooScroll or MooScroller.

The following StackOverflow threads might also be useful:

http://stackoverflow.com/questions/784053/how-do-i-change-the-browsers-scrollbar-colours-using-css/ http://stackoverflow.com/questions/526488/whats-the-deal-with-css-and-scroll-bars/ http://stackoverflow.com/questions/729713/how-can-one-use-scroll-bar-images/