Thanks for the replies.

I probably should've described my situation better. I'm offsetting the scrollbar of an overflown element so that it is well outside of the box. The problem is, a scrollbar is considered part of a box's flow. Of course, it is this way for obvious reasons: e.g. pushing all the content to the left slightly if a scrollbar needs to be placed on the right, thus making sure the scrollbar doesn't cover up any content.

That creates a problem for me, though. This means the content in my box will be offset differently based on the width of the scrollbar.

I'm really hesitant about doing this, as it is a main part of the layout. It looks great cross-browser, it even works in ie8. I'm just not sure if it will work cross-OS.

Now that my mind is more put to ease about scrollbar width, I'm worried about the default position of a scrollbar. Personally, I have never seen an operating system that positions scrollbars on the left of the window, but if there were one, it would absolutely destroy my layout.

Has anyone seen an OS interface with a scrollbar on the left? :)

Hopefully this gives you a better idea of what I'm doing:

img266.imageshack.us/…

That should give you rudimentary illustration of what I'm trying to do. The scrollbar is offset outside the body (which has the light grey background and encompasses the header and content element), although the scrollbar is still *technically* inside the "content" element, which has a transparent background. It only appears to be outside the content element because of the transparent background.

The problem comes if the scrollbar's width is increased or decreased. It would alter the position of the content.

I could never bring myself to rely on javascript for a design.

I'm content with what the CSS can do. I'm just worried about cross-OS compatibility, in the same way that many people worry about cross-OS compatibility when styling form controls.

I realize scrollbars aren't meant to be messed with. Part of the reason no CSS support for styling scrollbars was ever implemented is because the CSS spec doesn't assume that the user agent's default scrolling mechanism is a scrollbar. However, every major browser, ...actually every browser I'm even aware of, uses scrollbars.

Its a bit hacksy, yeah, but I think it could work. I am really hesitant though. Part of me wants to drop this idea altogether and go the more conventional route. The problem is is that its so seductively good looking.

Here's an example of what I was talking about if anyone cares: epsilon-not.net/… (a few experimental :target rules I added to the stylesheet)

The scrollbar appears as though it were "outside" the main content element. I have no idea how it looks cross-OS though.

For some reason it's very buggy in firefox, even mousing over it in firefox 3.x will cause the page to flicker, firefox 4 is better, but not completely. Chrome, Opera, and Safari have no problem with it.

Yeah, I can't figure out why firefox bugs out like that. Every other browser is fine. =/

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/…

Thanks Kroc,

I hope to somehow make it standalone, but I worry that it is so tailored for my site's design, it would be hard to create a more flexible version. It would most likely be hard for people to use it right out of the box without extensive customization and examination of the code. Nonetheless, I'll see if I can make it more flexible.

Thanks Raj, that does help. I didn't know my site looked so horrible in Konqueror, lol. (Looks like Konqueror has a bit of trouble rendering text shadow.)

It doesn't look like you had javascript enabled in Firefox, did you? It might just be messing up.

As you probably noticed, the Opera bug for some reason adds to the total height of the page whenever the scrollbar is scrolled down further. I can't figure this one out, and it seems to only affect Opera.

I've been reworking these scrollbars for a little while now, and I think they're looking fairly good looking so far, however, the script only works for vertical scrollbars at the moment. It allows free styling of the scrollbar and scroll track by styling the .scrollbar and .scroll-track classes. Every property is stylable except for position, top, bottom, right, and left.

The only way I could get these custom scrollbars to be flexible enough to release as a standalone script was to add an "inner" wrapper div. It adds and inner wrapper div to the element you want to scroll, thus wrapping all of its contents, otherwise it leaves the DOM completely untouched. I hope to eventually make a version that allows the user to choose either a wrapper div to hide the scrollbar, or an absolute positioned div that obfuscates it.

In any case, here it is: epsilon-not.net/…

And here is the source: epsilon-not.net/…

An explanation of how it works is given in the .js file.