The entire intent of this technique... or at least the inspiration... is to create an environment where a "brand" (like a Channel logo in the lower right hand of a T.V.) can be placed without the ugly technique of constantly re-positioning it at the location as the user scrolls around.
It currently just intercepts all events, then checks to see if the event occurred within one of the layers that matters. I tried to do it via only catching events in the layers that matter, but that kept working differently than expected, so I thought I'd just do a proof of concept using the brute force method. Although I couldn't get the routeEvent to work correctly either, you'll notice that links do still work even though click events are (were) captured.
The scrollbar's size is proportional to the content (whatever content I would choose to put in here) and clicking in the scroll background goes one page at a time (even though it blinks the WHOLE background when you do it)
Don't like it on the left side? Then move it to the right or move it back to the left if you liked that better. It also would have disappeared completely if the content was smaller than the page.
The other really cool part is that, except for any "content" in any of the layers including the scrollbar and the brand, the whole scrolling system effectively "vanishes" for any browser that doesn't understand layers, as everything is just a bunch of empty boxes and javascript.
Theoretically, you could do some really cool things with this, like use a nice repeating image for the background of the scrollbar, add other "buttons" to it, and even do special things when the right or middle mouse buttons are used or when keys are pressed (right now, spacebar does a page-down). If one desired, one could implement the "snap-back" feature of the Win**** interface as well, though I would prefer to simply do that when a user hits ESC (not yet implemented).
The scrollbar and buttons themselves were ugly originally... now they are just "faceless" buttons. I haven't quite remembered how to make borders that actually take into account the entire width/height of the area, rather than the content of the area, so I just made a few more layers to pretend to be borders (and shifted them to change the 3d effect.
I also tried putting a background image in this content area, but it makes scrolling much slower, so I opted to leave it out (any "underlying" content below this text slows things down, actually.. including a too-large brand image... tried that on accident)
bottom
Arbitrarybrand/logo