Should we be styling our scrollbars?

HTML & CSS
1

While looking through a gallery I came across this blog (http://blog.kimellefsen.com/) and noticed the stylized scrollbar. (If you can not view the scrollbar, there is a screenshot attached.)

It’s not necessarily recognizable as a scrollbar at first, but it does look nicer than the standard browser scrollbars.

Should we be stylizing our scrollbars more, or should it should it be reserved for only a few projects where it really enhances the site? Or should we not be stylizing scrollbars at all?

I don’t know much about stylizing scrollbars, but it seems like a good idea to style them. Just as you always style a sites background (unless you want the background to be white for the design) we should be styling the scrollbars unless the default suits the design.

Maybe this could create usability or other problems, but I don’t really know, which is why I am starting this discussion.

So let’s hear what you think! Should we be styling our scrollbars?

2

I can’t see the stylized scrollbar. I see a regular browser default…in all my browsers, by the way.

I really thought styling scrollbars was a relict of the 90s that no one would even think of bringing this over to the 21st Century…

I’d stay away from it without exception. No use in it.

Why do you think it seems like a good idea?

3

I just tried it in Safari and it doesn’t work there either.

I do see your point, mikebrady, but I guess it depends on how you view a browser. To my mind, the browser and all its functions are separated from a website. The scrollbar is part of the browser so I’d never expect it to be styled just like I’d not expect for my browser’s toolbar or entire GUI to change based on the website I visit.

4

Hmm. I’m using Chrome to see the stylized scrollbar. Can’t see it in FireFox or IE. I’ll have to post a screen shot of it.

I think, when done right, it helps completes the site’s design. On this site, the stylized scrollbar does not feel 90’s or old in any way.

It just fits in with the rest of the design and feels natural.

But, I guess we already found one flaw in that it does not work in FireFox or IE. I don’t have Safari, but I doubt it works there.

5

Hi Maleika, I did not see it at first either. Then I viewed the css and noticed the webkit selectors. Then I viewed it in Chrome and sure enough it is there.

I know IE always had the option of styling scrollbars and I never was a big fan of it. I think this may be helpful for those that have such a dislike for scrollbars, at least it would give them the option of slimming them down a little.

I don’t have Safari, but I doubt it works there.

It should, Safari runs the webkit engine.

6

I never thought of it that way, and I agree with you. But then should browsers be styling their scrollbars to better match the browser’s GUI?

And since they aren’t doing that now (except Safari), is styling the scrollbars on our sites a good solution to the browsers lack of good scrollbar design?

7

It works for me on win/safari-4 :wink:

8

I didn’t word my post correctly. Scrollbars are part of the OS rather than the browser. Sorry!

Not sure whether browsers should force a certain scrollbar style. If you use skins from Opera or Firefox, many of them modify the scrollbar to fit the theme, so it is undoubtedly possible.

9

Interesting. It does not work on Safari 4 in OS X on the Mac. :injured:

10

Hah, yea I was just thinking about that and realized the scrollbars are a part of the OS. But also, like you said, if you skin Opera or Firefox the scrollbar can change to fit the theme. So browsers do have the ability to change to the scrollbar style. So why don’t they? Do they find it not worth it?

I don’t know, but I think they should. Right now I am using Chrome and with my current set up (not sure if it is the default or if I changed it) Chrome appears in a baby blueish color and then there is the gray scrollbar that I see in Firefox and IE. If the scrollbar did match the style of Chrome it might look more natural and give the browser more uniqueness, rather than having the default OS scrollbar.

11

Most people don’t like it :). Some find it confusing and out of the ordinary I guess.

FOr those savy people who want more zazz in our browser, skins are available, but Mozilla just decided to keep it basic for most, and then have a sexy addon for those who want :).

12

I think it could actually enhance a sites design whenever the scrollbars are set on elements inside the page. After all that is when designers start complaining about scrollbars being to fat.

Take This Page for example. That was just something I threw together a long time ago but I think those slim scrollbars would look nice there. :slight_smile:

As long as I don’t have to start giving the viewers directions on how to find the scrollbars then it could enhance the looks of a little site like that.

13

What if you stylize the scrollbar tastefully, and not necessarily do it to add “more zazz”, but to polish up the design? Say Chrome did not change anything about the default Windows scrollbar except give it a blueish tint to match the rest of GUI.

I’m just saying that if you (as a browser developer) can change the scrollbar, then why stick with the default? The way I see it is that, being able to stylize it is one more opportunity to enhance your design. Of course it could be done poorly, and look awful, and annoy users, but if done right it could make the users experience even better.

14

Had I been browsing with Google-Chrome, and come across this site, I would have had an initial “where’s the $%^%$ scrollbar” moment. I will put up with styled scrollbars within the page if they are readily recognized, but to mess with the main scrollers is an abomination. Everyone, and I do mean everyone, learns their own browser, and has certain expectations of just how to use it. Having to recognize some designer’s idea of how the vertical scrollbar ought to look is not within the realm of those expectations.

Before you alter the user interface, remember that greater than 99.9% of all users learned to browse somewhere other than your site. Exercise care.

cheers,

gary

15

I agree, but I think on this particular site, the way the scrollbar is stylized is what creates that reaction, not the fact that it is stylized. As with everything else with design, it can be done well and it can be done poorly.

We are of course asking this question assuming it is done well and still serves its purpose of being a recognizable and usable scrollbar.

16

Let’s be fair - a LOT of malarkey from the 90’s is rearing it’s ugly head again… we go through this every few years. From “I HAVE to have this exact font everywhere” to autoplaying media to styling elements that you really have little business messing with… From framesets to javascript doing CSS’ job - it’s all there.

Hell, even PX metric fonts are making a resurgence with the total steaming piles of failure that make up the current crop of forum skins (vbull 4, myBB, phpBB - though phpBB never left them).

Just look at all the nimrods slapping up “best viewed in” garbage and the “don’t use IE” games of the people jumping the gun on specifications not even out of draft.

Which goes with something I always tell aspiring designers and developers - and for the former it’s often a bitter pill to swallow.

People do not visit websites for the cutesy **** graphics you hang on your layout - they visit for the content. You spend too much time messing around with the appearance of every little stupid element, you are probably neglecting not just the amount and quality of the content, but interfering with the users experience of getting to it. In the case of a LOT of this ‘gee ain’t it neat’ cutesy scripted trash, usually the net result is blowing 400k of images, 400k of javascript and 100k of markup/css on delivering a mere 3k of plaintext.

Of course the REALLY sad part is that things like styled scrollbars usually rely on browser specific code or javascript - making it dead weight/wasted bandwidth for the people not on the right browser or with javascript blocked…

The firefox noscript plugin and opera’s in-built per site enable/disable of scripting being VERY popular for a reason.

But let’s look under the hood of that blog… 12k of HTML, 88k of javascript spanning 13 SEPARATE FILES, 24k of CSS in four files - all to deliver what appears to be 3.6k of text that barely has any layout or styling applied to it… and leaving one asking the question 88k of javascript FOR WHAT?!? 35 validation errors in a tranny doctype means it’s not HTML, it’s gibberish - the document outline shows broken heading orders, etc, etc…

Sad part is a 8 bit .png screencap of the site would probably be smaller than the total combined page size… NO reason for that to be more than 8k of markup, MAYBE 12k of CSS - and I’m not seeing ANYTHING on that site that warrants the inclusion of javascript.

Especially since it looks like 90% of it doesn’t work on anything newer than IE6.

17

I did the same thing for my own site, andrew-brundle.com, a few weeks ago.

It only works in Chrome; in other modern browsers it just degrades. The only issue I’m aware of is that it creates a sort of 20px horizontal scroll in IE6. In other words, IE6 generates a horizontal scrollbar.

The example you’ve referenced is, IMO, a bit too narrow. Not sure about those rounded corners, either.

The CSS needed for this is fairly simple. On my site, I’ve left the code right at top of the external CSS file in order that I can delete it if any problems emerge further down the line.

Give it a go if you’re into this kind of thing – but always make sure it’s usable.

18

There is proprietary CSS available to style scrollbars in IE and Opera but any sensible person will turn that off.

Scrollbars are much easier to work with when all your scrollbars on your computer look the same.

19

Just playing devil’s advocate here, but links are still just as recognizable and easy to use when styled differently across different websites. As long as a styled scrollbar is instantly recognized as a scrollbar, than what makes it any less easy to use?

20

Not always though - you always have the jokers who choose color only with no underlines - in colors you can barely tell apart from the normal text. Turns it into a hunt fest as to “what here is actually a link”

Or when people use underlines and colors on non-link items for that matter.

While certainly you can get away with it on small elements - menu buttons, an obvious navbar, something styled as a button - doing something like stripping underlines off links in the middle of flow text is much akin to restyling the page bar…

Especially if you use a scripted scrollbar - More so with scripting that has no graceful degradation (like half the garbage people post on Dynamic Drive).