nanoScrollerJS - Mac OS X Lion-Styled Scrollbars

nanoScroller is a jQuery Plugin that allows you to create Mac OS X Lion-Styled Scrollbars for your website. It utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

See also:

• jQuery Plugin For Custom Scrollbar - scrollbox
• Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar
•  jQuery Custom Scrollbar Plugin - malihu
• Responsive Browser Scrollbar Replacement Plugin - ClassyScroll
• Facebook-like jQuery Scrollbar Plugin - slimScroll
• jQuery Custom Scrollbar Plugin with jQuery UI - acescroll

How to Use:

1. Include necessary javascripts library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>

2. Add CSS

<link rel="stylesheet" href="css/nanoscroller.css"> 
/* You should specify a width and a height to your container, and apply some custom styling for your scrollbar. Here's an example: */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane   { background: #888; }
.nano .slider { background: #111; }

3. Markup.The following type of markup structure is needed to make the plugin work

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

4. Markup.The following type of markup structure is needed to make the plugin work

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

5. Call the function

$(".nano").nanoScroller();

6. Available options.

/**
  a classname for the pane element.
  @property paneClass
  @type String
  @default 'nano-pane'
 */
paneClass: 'nano-pane',

/**
  a classname for the slider element.
  @property sliderClass
  @type String
  @default 'nano-slider'
 */
sliderClass: 'nano-slider',

/**
  a classname for the content element.
  @property contentClass
  @type String
  @default 'nano-content'
 */
contentClass: 'nano-content',

/**
  a setting to enable native scrolling in iOS devices.
  @property iOSNativeScrolling
  @type Boolean
  @default false
 */
iOSNativeScrolling: false,

/**
  a setting to prevent the rest of the page being
  scrolled when user scrolls the `.content` element.
  @property preventPageScrolling
  @type Boolean
  @default false
 */
preventPageScrolling: false,

/**
  a setting to disable binding to the resize event.
  @property disableResize
  @type Boolean
  @default false
 */
disableResize: false,

/**
  a setting to make the scrollbar always visible.
  @property alwaysVisible
  @type Boolean
  @default false
 */
alwaysVisible: false,

/**
  a default timeout for the `flash()` method.
  @property flashDelay
  @type Number
  @default 1500
 */
flashDelay: 1500,

/**
  a minimum height for the `.slider` element.
  @property sliderMinHeight
  @type Number
  @default 20
 */
sliderMinHeight: 20,

/**
  a maximum height for the `.slider` element.
  @property sliderMaxHeight
  @type Number
  @default null
 */
sliderMaxHeight: null,

/**
  an alternate document context.
  @property documentContext
  @type Document
  @default null
 */
documentContext: null,

/**
  an alternate window context.
  @property windowContext
  @type Window
  @default null
 */
windowContext: null

Change Logs:

v0.8.7 (2015-04-30)

• Update

v0.8.2 (2014-08-30)

• Make ::-webkit-scrollbar 0 width

v0.8.1 (2014-08-08)

• Allow retina values for computed padding

v0.7.2 (2013-04-13)

• Fix for nested nanoScrollers

---

This awesome jQuery plugin is developed by jamesflorentino. For more Advanced Usages, please check the demo page or visit the official website.