NanoScroller.js - An easy-to-use jQuery scrollbar that looks like Lion's.

http://jamesflorentino.com/jquery.nanoscroller/

by kjventura • 15 years ago

36 47 15 years ago

ghc• 15 years ago

I like this attempt better because it works with the arrow keys: https://github.com/nikolaydyankov/lionbars

1p1e1• 15 years ago

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.

samarudge2• 15 years ago

I thought we got rid of custom scrollbars back in 2000

slig• 15 years ago

No, they're back. See Gmail.

mweibel4• 15 years ago

Which scrollbar do you mean? Imo thats just css overflow settings

maushu• 15 years ago

The difference between these custom scrollbars is that (in modern browsers) they are still scrollbars that work exactly like other scrollbars and only look different.

samarudge2• 15 years ago

Except they don't, try using the arrow keys to navigate in the scrollable DIV. Not working for me (Firefox latest stable). It also scrolls ridiculously slowly using the mouse wheel. So we're actually going backwards in functionality.

Fuck the design if it's unusable.

cbs2• 15 years ago

Doesn't behave like a native widget for me (firefox 8.0).

cbs2• 15 years ago

No, you see, those were non-standard back when "non-standard" was demonized so we could give Microsoft shit for not doing what we want. We've sense realized that what we want to do isn't standard either, just in a different way from what IE did. Now we do whatever the fuck we want and wait for the standards to play catch-up.

Native widgets with reliable behavior and useability be damned; it looks pretty and thats what we've always really wanted.

marknutter2• 15 years ago

Native scroll bars are ugly. I agree that if you're going to override them they should function exactly the same. Modern browsers actually do provide a standard way to re-style them. So if you want to be consistent design-wise on older browsers a javascript solution is necessary.

stuaxo• 15 years ago

Looks nice, middle button scrolling doesn't work though.

5h• 15 years ago

fails on IE7 & 8, should fallback to os widgets at least

DonnyV• 15 years ago

The scroll direction is backwards in IE9.

adamtulinius• 15 years ago

Same on Chrome 16.0.912.41 beta-m

Edit: Just updated to 16.0.912.59 beta-m (newest on this channel), still working in reverse. OS: XP.

freyrs3• 15 years ago

Same in Chromium. Reversing the scroll direction is a pretty serious UI flaw.

neanderdog• 15 years ago

"looks like Lion's" - I'm supposed to want this?

timerickson2• 15 years ago

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.

gizzlon• 15 years ago

too fast? It's waaay too slow in linux firefox.. Horrible

timerickson2• 15 years ago

Exactly my point. It's inconsistent from browser to browser. It's not tied to the OS in any way.

rauchg2• 15 years ago

I created a similar project a few weeks ago, with the difference that it preserves native scrolling: http://learnboost.github.com/antiscroll

durzagott• 15 years ago

Your is more usable, I can scroll with my mouse wheel, but I cannot click on the scroll bar's empty area and "jump" down a section.

roel_v• 15 years ago

Doesn't respect native scroll speed - way too slow on FF/WinXP.

tikhonj• 15 years ago

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?

jamesflorentino3• 15 years ago

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.

staticshock• 15 years ago

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.

colanderman• 15 years ago

Holy grail == hold down a button and drag.

Many web browsers already have this functionality (sort of) with middle-click.

Forcing the user to navigate to some tiny on-screen affordance which takes up screen real estate is a terrible design (except in the special case where the scroll bar is at the extreme edge of the screen).

Mobile web browsers seem to get this right. Touch the element you want to scroll & drag it; an overlay pops up to show your relative location. Intuitive, easy, and doesn't take up screen real estate.

Scroll wheels (especially Kensington's beautiful "Orbit" scroll rings on their trackballs) are pretty close to the mark too.

bdg• 15 years ago

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.

jamesflorentino3• 15 years ago

The custom scrollbar is actually meant for scrollable div layers. (e.g. logs for chat-based applications). I needed a way to get rid of the thick native scrollbar skin for a javascript-dev project to match the overall design. Hence, why I came up with it.

throwaway22019• 15 years ago

So you came up with a solution that even on Lion doesn't use current scrollbar style (always visible mouse one/thin trackpad one), doesn't use kinetic scrolling if it's enabled, doesn't obey scroll speed preferences and doesn't even scroll in the same direction as the rest of things? That's just marvelous; I hope I'll never have to use your software.

mweibel4• 15 years ago

Matching the overall design is not an excuse for doing such a thing. It changes the default behaviour & design of standard scrollbars and this is a serious design flaw.

marknutter2• 15 years ago

I'm really glad your wrote this. It's just the solution I'm looking for. Uber-geeks will always complain about custom scroll bars, but the rest of society appreciates the clean design.

Jasber• 15 years ago

It doesn't seem to respect Lion's reverse scrolling which makes this a tough usability sell (among other reasons).

antinitro• 15 years ago

I was going to fork it on github and fix it but then I found this: http://www.nikolaydyankov.com/lionbars/

Seems to do the same job whilst respecting lion scroll direction (Haven't tested with standard scrolling so there's a chance they could have just imitated reverse scrolling)

zobzu• 15 years ago

scrolling direction should depend on your mouse scrolling setting, not the website settings

reedlaw• 15 years ago

It reverse scrolls with my mouse wheel, but I'm on Ubuntu. I wonder if Lion users are seeing reversed-reverse scroll.

hackermom• 15 years ago

Needs more jQuery.

mweibel4• 15 years ago

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.

dharma1• 15 years ago

this one has been doing the job for us http://rocha.la/jQuery-slimScroll

adamesque• 15 years ago

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.

jamesflorentino3• 15 years ago

Thanks! That seems pretty useful. Will include that in my next commit.

sil3ntmac• 15 years ago

I implemented something similar here: https://github.com/joevennix/jScrollie

I agree that it is best to let the browser handle the scrolling mechanics. Then you simply hide the original scrollbar by having an embedded div hold the content with a width thats about 40px or so bigger than the outer, fixed width div ( and overflow: scroll-y ).

kyle81• 15 years ago

wow, it looks like a rip off of an older project - http://rocha.la/jQuery-slimScroll

shocks• 15 years ago

This breaks Vimium, it would be nice if it didn't do that.

dmvaldman• 15 years ago

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!

pero123• 15 years ago

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 :)

NanoScroller.js - An easy-to-use jQuery scrollbar that looks like Lion's.

Related Stories