4 ms·

Custom Scrollbars in WebKit

41 points by jimsteinhart 15y ago

daleharvey 15y ago
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
rhartsock 15y ago
KILL IT!
Entlin 15y ago
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...
- shadowpwner 15y ago
  The linked example, http://maxvoltar.com http://maxvoltar.com, works fine for me for the spacebar and pagedown. I'm using Chrome beta build.
  - Entlin 15y ago
    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).
edu 15y ago
No, not again. I hoped that the custom scroll bars idea died in 1999...
- alexmuller 15y ago
  I was reading it thinking the same thing, but the scrollbars on http://maxvoltar.com/ http://maxvoltar.com/ actually look and work nicely.
  - Stuk 15y ago
    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.
    - alexmuller 15y ago
      Very true! I'd probably make them flush with the right edge and slightly wider, based on that.
    - mnutt 15y ago
      I'll bet he could widen the target area while still retaining the original design.
      - MatthewPhillips 15y ago
        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?).
- avolcano 15y ago
  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/webkitvsnot.png http://cdn.css-tricks.com/wp-content/uploads/2011/05/webkitv...
rglover 15y ago
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.
- pavlov 15y ago
  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.)
michh 15y ago
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.
antidaily 15y ago
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.
lloeki 15y ago
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.

41 points by jimsteinhart 15y ago

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

rhartsock 15y ago

KILL IT!

Entlin 15y ago

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...

shadowpwner 15y ago
The linked example, http://maxvoltar.com http://maxvoltar.com, works fine for me for the spacebar and pagedown. I'm using Chrome beta build.
- Entlin 15y ago
  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).

edu 15y ago

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

alexmuller 15y ago
I was reading it thinking the same thing, but the scrollbars on http://maxvoltar.com/ http://maxvoltar.com/ actually look and work nicely.
- Stuk 15y ago
  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.
  - alexmuller 15y ago
    Very true! I'd probably make them flush with the right edge and slightly wider, based on that.
  - mnutt 15y ago
    I'll bet he could widen the target area while still retaining the original design.
    - MatthewPhillips 15y ago
      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?).
avolcano 15y ago
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/webkitvsnot.png http://cdn.css-tricks.com/wp-content/uploads/2011/05/webkitv...

rglover 15y ago

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.

pavlov 15y ago
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.)

michh 15y ago

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.

antidaily 15y ago

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.

lloeki 15y ago

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.