recent/current projects

Check out Aburt's publishing company
ReAnimus Press
  Publishing award-winning and bestselling authors like:

     
Welcome to AndrewBurt.com
New from ReAnimus Press
Dear America: Letters Home from Vietnam   The Box: The History of Television
 
 

Top Scrollbars

So, whose idea was it to put scrollbars at the bottom of a region, rather than the top? I had a need for both a top and bottom scrollbar on a graphic image, so visitors could scroll it horizontally without (ahem) scrolling down to the bottom of it. (In particular, this was for a large street map used as a form submit image.)

This isn't a standard feature, and as of this writing, there's no HTML or CSS option to place scrollbars on the top rather than bottom. In looking for a solution I didn't see any offhand, so I devised one. In case anyone else is interested, here's what I did. (Details below the demo.)

The technique here is to create a wide, thin div right above the div you want to have a top scrollbar. Inside this wide/thin div is place something wide and thin, to guarantee it will get a horizontal scrollbar. Ideally, this something should be exactly as wide as the thing in the div below it. If that's a 2000x1300 pixel picture, for example, then a 1 pixel high by 2000 pixels wide invisible gif would do the trick. (Create with photoshop/etc. There are also sites on the web with details of other ways to create such.)

Place the 1x2000 gif in the top div, your real content in the bottom. Copy the javascript below into your page:

Then give id names to each div, such as "scroller" and "scrollee", and add an "onscroll" even to each div that calls scroller("mydivname","otherdivname"), (where "mydivname" and "otherdivename" are the ID names for that div and for the other div, such as used in the example below:

Having both call scroller() ensures the user can scroll with either horizontal scrollbar and both will move appropriately. The divs should have their CSS overflow style set to "scroll" to guarantee they get scrollbars. I found I needed to set a height also to ensure it worked in all browers tested.

If you wanted the bottom scrollbar to go away, set the lower, main div' overflow property to "hidden".

(Note: technically 'onscroll' is not a valid element of a div, but it works. If you're bothered by this, using javascript and the yourdiv.onscroll = function... syntax would be a workaround. Also note that if you wanted to create a left scrollbar instead of on the right, there are some tricks mentioned using the HTML "dir=rtl" text direction property,AKA "direction: rtl" in CSS. Doesn't help with top vs. bottom scrollbar though.)

Anyway — voila! — a functional top scrollbar.