CODEWITHSUNDEEP
javascriptjqueryscrollbarosx-lion
trnc
trnc

Reputation: 21587

Lion-like scrollbar with jQuery?

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

Edit: Here's an image for Windows users

enter image description here

Upvotes: 49

Views: 36663

Answers (10)

roxes
roxes

Reputation: 113

jScrollPane plus a little bit of modification would do.

This is a tutorial about it.

Upvotes: 0

Mazatec
Mazatec

Reputation: 11649

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

Upvotes: 3

mattie
mattie

Reputation: 1

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.

Upvotes: 0

Nathan
Nathan

Reputation: 12010

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

enter image description here

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

Upvotes: 42

silviomoreto
silviomoreto

Reputation: 5897

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.

Upvotes: 1

user950658
user950658

Reputation:

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.

Upvotes: 2

Murat Çorlu
Murat Çorlu

Reputation: 8555

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

Upvotes: 13

Ayush Rastogi
Ayush Rastogi

Reputation: 11

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

Upvotes: 0

Nikolay Dyankov
Nikolay Dyankov

Reputation: 7244

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

Upvotes: 43

FinchSol
FinchSol

Reputation: 97

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.

Upvotes: 3

Related Questions