Lion-like scrollbar with jQuery?

问题:

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

回答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/

回答2:

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

回答3:

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

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

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

回答6:

This is an old question.. but maybe someone is still interested in my version:

Source: https://github.com/pixelass/customScrollBar

Example: http://pixelass.github.io/customScrollBar/

This plugin actually replicates the scrollbar more precisely than antiscroll or nicescroll.. etc.

The plugin allows full control over the scrollbars (currently only vertical) and does not require mousewheel.js (as most plugins do) Removing this dependency was the main goal of my version.

It also listens to the scroll event (as antiscroll does). The fade-in and hover resize on the scrollbars were missing on all other plugins I found. My version includes an example to show how to achieve this effect.

There are optional (pseudo-)event-listeners "scrollEnded" "clicked" which are fired when the user's scroll has ended or when the scroll-bar-thumb is clicked.

This plugin also allows almost any imaginable style and setting of the scrollbar, as click-arrows (up-down-arrows).

Alpha

This is still alpha (time of posting) but development will continue as time passes.

回答7:

Use my plugin: scrollYou

It uses a simple approach to make the scroll inside the own element. So you dont have to add more elements to make it roll.

回答8:

nanoscroller or nicescroller would be a better option for smooth scrolling.

回答9:

This one has scroll bars like the ones on Mac and is very simple to install. You can basically apply any skin you like with css.

回答10:

jScrollPane plus a little bit of modification would do.

This is a tutorial about it.