This scrollbar issue has become a small obsession of mine. For the fun of it, I wrote a javascript scrollbar. I originally wanted to try jScrollPane, but I found that it absolutely destroyed the page's DOM by adding several wrapper divs, completely ruining my CSS rules. So I began to write my own scrollbar.

My scrollbar works a bit differently, and more hacksy/less hacksy than jScrollPane depending on how you look at it.

First it calculates the default scrollbar width, which it then subtracts from the right padding (or margin) to restore the grid to its proper display. After that, it creates a sort of "whiteout" div that is placed over and hides the default scrollbar, which is displaced outside of the main content element (obviously this will only work with certain designs). Once all that is done, it creates a new scrollbar and binds all the proper events to make it scroll with the page and to make it draggable.

I like this better than jScrollPane because it is infinitely simpler, plus, it really just uses the browsers default scrolling action so there is no need to add extra functionality for the mousewheel, arrow keys, home/end/pgup/pgdown, etc.

The whole thing is a little over 100 lines long. Right now, it works with every browser I've tried (incl. IE) except for Opera. A strange bug occurs in Opera and I can't figure out why. Hopefully I'll end up fixing it in the future.

If anyone is interested in using this, here's the example: epsilon-not.net/…

And the code (starts on line 37): epsilon-not.net/…