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.