Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 379 commits behind jamesflorentino:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .content. The other scrollbar div elements .pane > .slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

Please visit the downloads section to get the js and css template file (.zip).

To start using, you to do three basic things:

1. Mark Up

<div id="about" class="nano">
 <div class="content"> ... content here ...  </div> 

Copy the HTML mark-up. Change #about into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. #parent > .nano

2. CSS

@import url('nanoscroller.css');
.nano .content      { padding: 10px; }
.nano .pane         { background: #444; }
.nano .pane .slider { background: #111; }

3. JavaScript


Additional Methods

To scroll at the top


To scroll at the bottom


To stop the operation

#("#about.nano").nanoScroller({stop: true});

Refresh the scrollbar



  • Currently works in IE8+, FireFox, Chrome, Safari. But I haven't fully tested in all versions. If you find a bug, please report here at the issues section
  • For IE7 and below, it will fallback to the native scrollbar gadget of the OS.
  • It currently works with iOS5 (iPhone, iPad and iPod Touch). If you see it's broken on other tablets and mobile devices, please file a ticket in the git repo. Along with model name, and OS of the device.

From the author

I wrote this plugin out of necessity for a JavaScript project with designers and front-end developers in mind. Please also note that I will not be liable to fix your problem just in case you plan to use this commercially and some unforseen event arises. However, I will do what I can to immediately patch a solution.