Custom Scrollbars in WebKit | Hacker News Reader

Custom Scrollbars in WebKit

css-tricks.com

41 pointsjimsteinhart18 comments

No, not again. I hoped that the custom scroll bars idea died in 1999...

I was reading it thinking the same thing, but the scrollbars on http://maxvoltar.com/ actually look and work nicely.

But completely ignore Fitt's Law. Usually I can speed my mouse to the right of the screen, click, drag. Here I speed to the right of the screen, maybe try clicking and dragging, fail, move in 30 pixels, overshoot, move back and finally can scroll.*

The problem with allowing the customisation of scrollbars is that most people are going to make them worse.

* Personally I use the scroll wheel, but I know a lot of people who don't.

Very true! I'd probably make them flush with the right edge and slightly wider, based on that.

I'll bet he could widen the target area while still retaining the original design.

To what gain? Custom scrollbars are unnecessary on this page. It makes sense on a scrollable div with lots of content around it; big fat default scrollbars are distracting in that scenario. But this page is a document. It breaks the expectations of the user (what is this thin line on the right of the screen and why can't I see the rest of the document?).

This is the same gut reaction I had, but custom scroll bars, used tastefully in divs instead of in the body element, are useful. A good example in the article is from Forrst:

http://cdn.css-tricks.com/wp-content/uploads/2011/05/webkitv...

Next thing you know they'll be able to change what my fonts and links look like! ;)

Its fairly predictable that the reaction to these would be "ugh browsers shouldnt let people do that" but the web is growing up and it is not purely a document delivery platform anymore, there are a lot of cases when a large scrollbar takes up valuable space within a small pane within an applications.

now along the same lines, when are we gonna get clipboard access

On regular websites, if done poorly custom scrollbars are not only useless but a major distraction. I like the idea when working on web apps, though. Most native apps take on a custom style (e.g. iTunes), and it's nice to mimic this and give the user a sense of working within a native application. Guess it's just preference though.

On Mac OS X, it seems that 99% of apps don't mess with the scrollbars (except for dark HUD-style windows and a other rare special cases where the default look would be too out of place).

iTunes is the lone offender. Those weird flat scrollbars were introduced a couple of years ago -- maybe iTunes 7.0. Perhaps Apple's justification for the change was that they wanted iTunes to look the same on both Mac and Windows.

(Edit -- it worth mentioning that 10.7 Lion will introduce iOS-style scrollbars to the Mac, so we can probably look forward to more freeform scrolling experimentation by app developers as well.)

I often scroll down using space or the pagedown key. This has worked with every webpage I've encountered so far.

While I don't care about the styling, every single linked example on that page doesn't work with space or the pagedown key. I wish there was a bit more polish here...

The linked example, http://maxvoltar.com, works fine for me for the spacebar and pagedown. I'm using Chrome beta build.

It doesn't for me. I have to click on the page first to make them work. OS X 10.6.7 / Safari 5.0.5 here (basically the newest thing you can get from Apple).

Ugh, custom scrollbars.

If you're going to do it (but please, don't), do it like this. Not with some crummy Flash applet. I'm talking to you, Vimeo.

As long as it merely "skins" the toolbar and doesn't try to override the browser scrolling function, like this terrible, terrible WordPress iPad theme which scrolls through javascript, making it ridiculously jerky and just weird... We're already "skinning" input elements with CSS which by default would look native to the OS, so that makes sense.

The web has grown up since IE5 (where you could merely color the scrollbar) and graphic designers will design some proper ones fitting with the whole site design, while a bad scrollbar design will just be an element of an equally bad site otherwise.

I was forced (by the client) to use custom scrollbars for a project about a year ago. Ended up using jscrollpane, a jquery plugin. This seems like a better solution.

KILL IT!

Reply on news.ycombinator.com