It doesn't seem to respect Lion's reverse scrolling which makes this a tough usability sell (among other reasons).
I created a similar project a few weeks ago, with the difference that it preserves native scrolling: http://learnboost.github.com/antiscroll
I thought we got rid of custom scrollbars back in 2000
Why are we messing with things I already knew?
You're the website, you deliver me content, I decide what to do with it. Don't take really long ways around to force me to do things your way, use semantic HTML and CSS, use the default scroll bars, let me pick a user-agent that makes scroll-bars the way I want. I don't want to use OSX Lion scroll bars because I think mac's are lame, but now I have no choice.
Doesn't respect native scroll speed - way too slow on FF/WinXP.
"looks like Lion's" - I'm supposed to want this?
Please take a look at this: http://www.useit.com/alertbox/9605.html
Section "Violating Design Conventions".
This is exactly why you shouldn't implement/use other scrollbars and similar things which change the behaviour of standard design practices.
I've also made my own scrollbar for a project, so I have enhanced super vision to see the edge cases:
1) scrollbar disappears on drag when the mouse moves out of the container. To fix you need to have a flag when the scrollbar is dragging and not call fadeout when true.
2) convenient UI feature: scrollbar can appear on hover, then disappear if user hasn't moved mouse, and reappear on mousemove. This is done in Facebook for example. This is accomplished by setting and clearing timeouts.
(also, the bot left container for the scrollbar doesn't have a rounded corner)
otherwise great job!
I don't understand what all this pseudo-innovation in scroll bar technology is accomplishing. I first saw it in google wave, which drastically changed the way that scroll bars behaved, and the way I had to interact with them. More recently, I've upgraded Ubuntu and now Unity has funky, unintuitive scroll bars. What is the holy grail of scroll bar usability, and is this getting us any closer? I'm not really feeling the advantages.
Edit: as per slig's comment, a lot of tools in google's latest design refresh are using terrible scroll bars, too.
James, great work and thanks for effort to make it even better.
Now for all people that cry about cross browser difference, you ought to put you energy at criticizing developers that create browsers that are not compatible with w3c standards.
I for one do not want to see same boring scrollbars until I die. Let's be realistic, browser scrollbars haven't changed in the past 20 years (except the option to change colors and that was wow back in the day). It's about time that they do.
Oh and, IE should be banned forever :)
How am I supposed to know something is scrollable if the scroll bar is hidden unless I'm hovering over it with my mouse? What if I'm using the keyboard?
I'm still waiting for a custom scrollbar that reacts to natural scroll speed. This and all other JS based scrollbars scroll much too fast in Safari.
The scroll direction is backwards in IE9.
Hi I'm James. The one who did the plugin. It isn't fully finished yet, it was something I did in my spare time. But I wanted to get it up asap so I could hear people's feedback. Thanks for your inputs so far.
I like this attempt better because it works with the arrow keys: https://github.com/nikolaydyankov/lionbars
This breaks Vimium, it would be nice if it didn't do that.
Nicely done. Isn't it going to be better if you hide the scrollbar when you are not actually scrolling? Like Facebook does for their chat and ticker bars.
this one has been doing the job for us http://rocha.la/jQuery-slimScroll
Looks nice, middle button scrolling doesn't work though.
fails on IE7 & 8, should fallback to os widgets at least
Needs more jQuery.
why doesn’t it scroll right to the bottom? the phrase "last updated Dec 7 2011" is half cut off
Too many custom scrollbar projects (including this one) make the mistake of overriding everything helpful the browser does for you and then imperfectly reimplementing it.
The best technical approach is to make the scrollable element naturally scrollable with overflow: auto, and then put it inside a viewport element (overflow: hidden) narrow enough to cut off the scrollbar (there are plugins that can help you figure out exactly how wide the host's OS's scrollbars are).
Then, you're free to listen for scroll events and overlay your own custom scroller UI.