Camen Design Forum

Strange question for you guys

append delete JJ

I never thought I'd be asking such a weird question, but does anyone have any idea what the average vertical scrollbar width is, taking into account all major OS interfaces?

Right now I'm working on a site design that has some "creative risk" involved, if you will.

The classic windows theme scrollbar is 16px for me. So I'm guessing it will hang in the range of 15-25px. At the moment I don't have access to any other operating systems, so I'm hoping someone who has spent their fair share of time using several different operating systems could give me their best guess.

I don't need exact numbers. I just need to ballpark it. At the moment I'm looking for screenshots of different OS UI's. ;p

Reply RSS

Replies

append delete #1. Kroc

I believe it is 23px. I never make a site wider than 1000px.

Change your theme in Windows to high contrast extra large and you should get the biggest scrollbars you can get.

The scrollbar is 15px here on OS X.

Also, check this out: browsersize.googlelabs.com/… Google’s viewport size stats. As you can see, 960 is the safe spot and you could get away with 1000, but it wouldn't be perfect.

append delete #2. SpeedoJoe

Coming from someone who appreciates well designed UIs, this is not a weird question at all.

append delete #3. JJ

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? :)

append delete #4. Kroc

Perhaps you should provide screenshots. I don't quite understand what it is you are trying to achieve. You can use CSS to hide the scrollbar, or force it to stay when there is no overflow (where it usually hides). You can also independently hide/show the horizontal / vertical scrollbars with overflow-x/y.

Yes, scrollbars do appear on the left, in RTL systems like Hebrew, but then the whole page is flipped so your layout will be kept.

That said, I have tricked a scrollbar to appear on the left using CSS; view this page in Firefox: camendesign.com/… but that's my CSS, rather than an option on the PC/browser, so you're safe.

append delete #5. Martijn

TL;DR:

Yes, some OS and browsers will put the scrollbar on the left.

More info:

Internet Explorer puts the scrollbar to the left of the content when you have set the reading direction to right-to-left (CSS: direction:rtl;).

Since this is a Microsoft product, it might mean every right-to-left installed Windows computer puts the scrollbar on the left side.

As I’ve never worked with a language like that I can’t speak from experience so I can’t say anything about Apple or other browsers.

Firefox on my Mac does not seem to reposition the scrollbar when the website’s reading direction is set to rtl, but it does ship with a function to switch the scrollbar location yourself. Left-handed people might find this an interesting option: askvg.com/…

append delete #6. Martijn

Aah, Kroc beat me to it on the language thing.

Though for me, that example page does not put the scrollbar on the left. I get semi-overlapping scrollbars on Kroc’s page. Screenshot: grab.by/…

append delete #7. JJ

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.

append delete #8. Kroc

Works for me: img514.imageshack.us/… Not sure why it isn’t on your Firefox O_o.

You should perhaps consider using JavaScript scrollbars for what you are doing. Scrollbars are not meant to be messed with. Also, it may be possible by approaching the issue from a completely different angle, but I’d have to see your code for any ideas on how to do that.

append delete #9. JJ

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.

append delete #10. JJ

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.

append delete #11. Kroc

Very nice hack, but I can't click on the scrollbar! (XP/FF3.6)

append delete #12. JJ

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

append delete #13. JJ

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

append delete #14. Kroc

Fecking sweet! That is seriously nice. And I love the elegance of the hack! I too looked at jScrollpane, in fact tons of JS scrollbars, for the edit tool on camen design and they all sucked completely. That’s why I abandoned doing it in JavaScript and hacked a left-sided scrollbar instead. I love the way you’ve approached this problem, not accepting existing solutions as good enough and taking the idea a whole new way. Great work!

Please do a full write up and share the code!

append delete #15. JJ

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.

append delete #16. Raj

Looks Nice - here some quick screenshots:
All Opensuse 11.3
Default Oxygen Theme - Scrollbars can be customized, Default Size is 17 for applications which use it (Konqueror and Opera)

img709.imageshack.us/…

img59.imageshack.us/…

img823.imageshack.us/…

Hope that helps ;)
Raj

append delete #17. JJ

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.

append delete #18. JJ

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.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn