Lion-like scrollbar with jQuery?

Question

Does anyone know a jQuery plugin that makes Mac OS X Lion style scrollbars for every browser?

Thanks in advance.

Edit: Here's an image for Windows users

Solution 1

Antiscroll is probably one of the best plugins available that recreates Mac OS X Lion scrollbars in every browser.

Some of the great features of Antiscroll:

1. Fades in and out
2. Size of container can be dynamically adjusted and scrollbars will adapt
3. Supports mousewheels, trackpads, other input devices natively
4. Shows scrollbars upon hovering
5. Supports IE7+, Firefox 3+, Chrome, Safari, Opera

Demo: http://automattic.github.io/antiscroll/

Solution 2

Interesting stuff, I wrote a plugin that does just that. It's called LionBars.

Solution 3

nanoScroller.js is a jQuery plugin that coded with Coffeescript and it makes its job: http://jamesflorentino.github.com/nanoScrollerJS/

Solution 4

The day Lion was released I was very fond of the scrollbar in the OS. The browsers already have a slick default scrollbar but I thought how about them Windows users ;).

It is still under construction but it might help you out: OSX Scroll

Based on tinyscrollbar but I made some adjustments. You can enable autohide (like in the OS). Just have a look at the source files.

Hope it helps.

Solution 5

The scrollpane Jquery Plugin is the closest you'll get.

see the lozenge demo.

To make it more like Lion, you could customize it to only show the bar when the track div is hovered over and ensure you use the animateEase function.

Oh and for extra Apple goodness change the direction of the scroll so down is up and up is down :-)

View more solutions

Comments

[Nikolay Dyankov]

Thanks! I'm glad people are finding it useful.

[bzx]

Spent 1,5h trying to figure out what I'm doing wrong.. looks like the script doesn't like the "type='text/javascript" in any of the <script> tags.. oh well. anyway, very nice script.

[Nikolay Dyankov]

You might want to try out the new version at github.com/nikolaydyankov/lionbars - much greater support (even IE8)

[skip]

@NikolayDyankov: How should LionBars .3 be used to make it work with iframes as well? $("iframe").lionbars(); don't seem to work.

[peteski]

The links seem to have gone bad, 404s and such.. Any ideas what happened to this plugin/project?

[xci]

Peteski22, check out my comment below, it might help you (don't know since I never saw how the original worked).

[Nathan]

@peteski22: Check out my answer below. Antiscroll is a great way to get Lion-like scrollbars in all browsers and OS's.

[ErJab]

As of Dec 2012, this plugin doesn't seem to support horizontal scroll bars.

[TheDude]

@NikolayDyankov: very nice - thank for sharing - but I couldn't get it to work with textarea, is there a special/extra step to do to achieve this?

[Jamie Hutber]

although for whatever reason i couldn't get this working on my site :p works standalone. I guess i have another plugin interfering.

[Jonathan]

The demo of this even fails for me with Chrome 25.0. Shows me the default scrollbar under.

[Nathan]

@MrAzulay Yeah, that has just started happening ever since the latest Chrome update. Hopefully the developer will fix it soon.

[Admin]

I just created a plugin that allows replicating the lion scrollbars with less dependencies. (still Alpha). See my answer here: stackoverflow.com/questions/6863748/… .. it also does not show scrollbars on hover but rather while scrolling is active (like native lion scrolling) pixelass.github.io/customScrollBar it also allows any other style

[Philipp]

+1 very easy to use and to customize. Also this is the most-current/most frequently updated plugin in here

[Prembo]

In my IE7/IE8 testing of the plugins listed here, nanoScroller is right up there - about to use it in my next project.

[bjb568]

Double scrollbars here on Safari 8.

[bjb568]

Double scrollbars here on Safari 8.

[Kishore Relangi]

scroll bouncing is missing