A free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.
Latest commit 1d3bdbb Oct 27, 2012 @Charuru Update README.md
Failed to load latest commit information.
css nvm Jan 17, 2012
js improved autohide on moseout and fixed bug when dragging the handle a… Mar 7, 2012
README.md Update README.md Oct 27, 2012
demo.html plugin reload working Dec 19, 2011
index.html dragging the slider is done Dec 1, 2011
lionbars-tm-project.tmproj added README Nov 30, 2011



LionBars is a jQuery plugin that styles default scrollbars to look and behave like in OSX Lion. Please check out the demo at http://charuru.github.com/lionbars/

  1. Main features
  2. How to use
  3. Options
  4. Other things to note

Main features

  • Browser support - IE8, Safari, Firefox, Chrome, Opera (Win & OSX)
  • Scrollbars look exactly the same in all browsers and OS
  • The content doesn't get shrunk when scrollbars are added, just like in OSX
  • Option to auto-hide scrollbars
  • Dark and light style
  • EndlessScroll functionality

How to use

  1. Download LionBars
  2. Include the script right after jquery
  3. Include the css however you prefer. For example, in the main stylesheet @include 'lionbars.css';
  4. Call .lionbars() on all elements that have scrollbars $('#box1, #box2').lionbars();
  5. You're done!


LionBars has some options that you can use to do some useful things. They will be explained here. All options are passed as an object to the constructor.

    autohide: true

Autohide scrollbars

LionBars gives you the opporunity to autohide the scrollbars so that they will only appear if you scroll the content. To enable the feature you only have to set autohide to true.


This feature makes it possible to react on reaching either to bottom o the right of the scrolled content. If you pass some handlers to the options they will be called and you can modify the content and update it.

    reachedBottom: function () {
        // do something with the content
        $(this).append('your html');
    reachedRight: function () {
        // do something with the content
        $(this).append('your html');

Other notes

LionBars is a relatively new plugin and has been recently fully rewritten. The basic functionality is there and working, other extras like light and dark styles, etc. are going to be added soon.

Thank you for your interest LionBars!

If you wish to contribute, make sure you contact me at me@nikolaydyankov.com


Nikolay Dyankov

Thanks to

Kersten Burkhardt For implementing endless scroll