49

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

enter image description here

Nathan
  • 11,155
  • 10
  • 47
  • 92
trnc
  • 16,829
  • 20
  • 53
  • 96
  • 1
    A link to what a "lion style scrollbar" is would be helpful for non-mac users. – James Montagne Jul 28 '11 at 18:31
  • 1
    Forcing one operating system's styles/defaults/behaviors on users of another is a very non-web-friendly thing to do. – coreyward Sep 02 '11 at 05:36
  • 4
    @coreyward Not when that particular OS's scrollbar style (in this case, OS X Lion) looks better for and is better for the web application that it is being implemented in. – Nathan Nov 29 '12 at 20:48
  • @Nathan Whether or not it “looks better” is entirely besides the point. You're forcing your visual preferences on another user in a way that interferes with the way they are used to experiencing web pages. While there are certainly valid reasons to adapt someone's experience, there are usually at least twice as many reasons to leave it the hell alone. This is something experience teaches you. – coreyward Nov 30 '12 at 07:12
  • 4
    @coreyward Actually, sometimes it _is_ indeed better. For example: it **saves space**. Some OS's scrollbars are thicker (like Windows) and take up space. Lion scrollbars don't take up any space. That is a valid reason to use it. So, no, it is not just "visual preferences" but it is also to save space in situations where you need the scrollbars to not take up any space. Not sure what you mean by _"This is something experience teaches you"_ but if you're saying I don't have experience, you're wrong. – Nathan Nov 30 '12 at 17:35
  • @Nathan Saving space at the expense of violating user's expectations about how to scroll a webpage is not, in my professional opinion, compelling. I'm confident that I'm not alone in this position, but nevertheless you disagree and that is fine. This, however, is not the place to discuss the matter. – coreyward Nov 30 '12 at 19:22
  • 2
    @coreyward We both are not going to agree about this, so let's just agree to disagree. I know that I am not alone with my position either. – Nathan Nov 30 '12 at 19:35
  • 2
    @coreyward Also I just wanted to add that, whether or not the scrollbar is the native scrollbar, you still scroll it the same way. – Nathan Dec 01 '12 at 00:13
  • 2
    @coreyward seems like you're not willing to enhance the users experience at all. People aren't stupid, they know what scroll bars look like. If they look different from the default windows one and its inline with the sites style then imo its for the better. – Jamie Hutber Feb 05 '13 at 08:47
  • @JamieHutber I'm a designer. You do the math. Now seriously, end thread — this is ridiculous. – coreyward Feb 05 '13 at 16:19
  • could have fooled me then :p – Jamie Hutber Feb 05 '13 at 18:10

10 Answers10

43

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

Gilles 'SO- stop being evil'
  • 92,660
  • 35
  • 189
  • 229
Nikolay Dyankov
  • 5,020
  • 9
  • 45
  • 64
  • Thanks! I'm glad people are finding it useful. – Nikolay Dyankov Sep 18 '11 at 05:52
  • 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 – bzx Nov 30 '11 at 17:51
  • 1
    You might want to try out the new version at https://github.com/nikolaydyankov/lionbars - much greater support (even IE8) – Nikolay Dyankov Dec 02 '11 at 12:20
  • @NikolayDyankov: How should LionBars .3 be used to make it work with iframes as well? `$("iframe").lionbars();` don't seem to work. – skip Mar 31 '12 at 17:18
  • 5
    The links seem to have gone bad, 404s and such.. Any ideas what happened to this plugin/project? – peteski May 24 '12 at 10:48
  • Peteski22, check out my comment below, it might help you (don't know since I never saw how the original worked). – xci Jun 27 '12 at 16:01
  • @peteski22: Check out [my answer](http://stackoverflow.com/questions/6863748/lion-like-scrollbar-with-jquery/12658668#12658668) below. _Antiscroll_ is a great way to get Lion-like scrollbars in all browsers and OS's. – Nathan Sep 30 '12 at 23:32
  • @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? – TheDude Jan 31 '13 at 06:22
  • Double scrollbars here on Safari 8. – bjb568 Nov 22 '14 at 19:51
42

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/

Community
  • 1
  • 1
Nathan
  • 11,155
  • 10
  • 47
  • 92
  • 1
    although for whatever reason i couldn't get this working on my site :p works standalone. I guess i have another plugin interfering. – Jamie Hutber Feb 05 '13 at 08:47
  • The demo of this even fails for me with Chrome 25.0. Shows me the default scrollbar under. – Jonathan Mar 22 '13 at 15:11
  • @MrAzulay Yeah, that has just started happening ever since the latest Chrome update. Hopefully the developer will fix it soon. – Nathan Mar 24 '13 at 19:09
  • 3
    I just created a plugin that allows replicating the lion scrollbars with less dependencies. (still Alpha). See my answer here: http://stackoverflow.com/questions/6863748/lion-like-scrollbar-with-jquery/#16537873 .. it also does not show scrollbars on hover but rather while scrolling is active (like native lion scrolling) http://pixelass.github.io/customScrollBar/ it also allows any other style –  May 14 '13 at 08:18
  • Double scrollbars here on Safari 8. – bjb568 Nov 22 '14 at 19:49
  • scroll bouncing is missing – Kishore Relangi Oct 15 '15 at 17:39
13

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

Murat Çorlu
  • 7,029
  • 4
  • 47
  • 73
  • 1
    As of Dec 2012, this plugin doesn't seem to support horizontal scroll bars. – ErJab Dec 13 '12 at 04:27
  • 1
    +1 very easy to use and to customize. Also this is the most-current/most frequently updated plugin in here – Philipp Jun 09 '13 at 12:56
  • 1
    In my IE7/IE8 testing of the plugins listed here, nanoScroller is right up there - about to use it in my next project. – Prembo Oct 05 '13 at 04:09
3

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

Jagat Dave
  • 1,633
  • 3
  • 22
  • 30
Mazatec
  • 10,573
  • 23
  • 65
  • 106
3

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.

FinchSol
  • 97
  • 5
2

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.

  • Very nice plugin! It acts just like the Mountain Lion scrollbar. I like how you even made the scrollbar get bigger and add a scroll track like the native Mountain Lion scrollbar does when you hover your mouse on it. – Nathan May 18 '13 at 17:01
  • 1
    Thx for the comment. I'm actually going to extend the plugin a little more. Adding methods, events and providing some themes. It's actually just a scrollbar plugin. The lion-styling is just a demo-theme which is currently hardcoded in the index.html. But I guess it works for a demo. It's a little buggy when the content is too long. The scrollbar moves too far when the scroll factor is bigger than 5 or 6. I might also try to add elastic scrolling (which would require the mousewheel.js afterall) as an option (like in lion-native-apps) –  May 19 '13 at 19:22
  • I see that you even did a Leopard scrollbar theme. Nice! – Nathan Jun 11 '13 at 21:51
1

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.

silviomoreto
  • 4,641
  • 3
  • 27
  • 39
0

jScrollPane plus a little bit of modification would do.

This is a tutorial about it.

Jagat Dave
  • 1,633
  • 3
  • 22
  • 30
roxes
  • 113
  • 7
0

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

sloth
  • 91,747
  • 17
  • 156
  • 204
Ayush Rastogi
  • 11
  • 1
0

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.

Jagat Dave
  • 1,633
  • 3
  • 22
  • 30
mattie
  • 1