Comments on: Styling scrollbars the Webkit way

By: gxg

gxg — Wed, 09 Nov 2011 19:50:28 +0000

Is there a way to disable these WebKit-specific scrollbars through custom CSS? They were introduced in the new Google Reader interface and they are extremely annoying!

By: Techno

Techno — Sat, 23 Jul 2011 07:28:25 +0000

It’s really messy piece of code though.

By: Dan

Dan — Wed, 05 Jan 2011 15:40:20 +0000

hey, IE gave us other cool stuff too, like, y’know, AJAX

By: Alexander

Alexander — Tue, 10 Aug 2010 03:30:21 +0000

Yeah, It only works on Safari, Google Chrome, or another webkit browser.

By: porl

porl — Thu, 22 Jul 2010 18:36:34 +0000

Just tried to open the example url in ie8. Deffinitely not working.
Am I missing something?

By: Brendan Berman

Brendan Berman — Wed, 07 Jul 2010 01:24:29 +0000

Okay I had to respond to some of these comments.

Jens Grochtdreis and Nekochi: The idea to style scrollbars did originate with IE… however you could only change the colors of the components of the scrollbar. The webkit implementation gives you complete control by allowing you to use images in your design. This means that any design you want for the scrollbar can be implemented if coded correctly.

Cliff Wells: You can style specific div’s differently then the main scrollbar. So this is already supported, and I do agree with your statement.

Robert Kay: Its great that you’re learning to design. I myself am no master. Hopefully you are progressing well. In response to your comments, you can style the scrollbar in any way you want to with CSS currently in webkit. You can change the width/height of the scrollbar, and use images to define all of the objects in the scrollbar. So like I said above, any design you can think of for a scroll bar can be implemented. I am working on making a Google Wave-esque scrollbar which I will launch on my website in the next week or so. And using two nested div’s you can offset the scrollbar however much you wish to in the x an y directions. Also, they already allow separate styles for different scrollbars.

By: Robert Kay

Robert Kay — Sun, 04 Jul 2010 18:35:04 +0000

While i am still learning design tools and improving my skills I can say this about what I saw in the examples. I saw a lot of button relocation but nothing for color changes or thickness etc. In my humble opinion if you are going to stylize the scroll bars there should be controls for the size the color the shape the buttons and the placement. The ability to float the scroll bar out side of the area it is scrolling by an x or y co-ord. definitions for the type of scroll bar main, mid or sub. By giving concise type definitions you can lock down what a scroll bar looks like for different sections and style them specifically for the theme of the site. The ability to narrow a scroll bar to mere pixels with out the buttons could make somethings more intuitive as well as the ability to control the side of the frame it is used on. Just some thoughts from an amateur tryin to become a professional.

By: Cliff Wells

Cliff Wells — Tue, 08 Jun 2010 09:07:31 +0000

I created a WebKit theme (Chromium) in under 40 lines. It’s actually surprisingly easy.

As far as styling scrollbars, I personally think the main scrollbar should be treated separately from scrollbars inside the document. This would satisfy both designers and users. After all, if a designer changes how the Submit button looks, it doesn’t affect the way the navigation buttons appear.

By: Nekochi

Nekochi — Wed, 19 May 2010 03:34:26 +0000

This was the one good thing that IE had going for it. Glad that the other browsers are catching up since IE sucks in every other way.

By: Jens Grochtdreis

Jens Grochtdreis — Mon, 21 Dec 2009 10:09:35 +0000

So Webkit/Safari now mimics Microsoft? You’re serious? We could style scrollbars in IE for years and it was never really nice.
What’s next? Conditional Comments would be a very nice idea to copy from Microsoft, maybe the only one. Please don’t copy hasLayout ;-)