Using jQuery to create a scroll bar like MacLionOS _ jquery

This article uses nanoscrollerjs to easily implement the special effects of the MacOS system scroll bar, as well as the use methods and parameters of this plug-in. It is very good. We recommend it to you here. NanoScrollerJS is a jQuery plug-in that implements the scroll bar Effect of Mac OS X Lion system in a simple way. This scroll bar plug-in uses the smallest HTML structure. nano>. nano-content. Other scroll bar elements. pane>. nano-slider are dynamically loaded when the plug-in is running. The scroll bar plug-in uses the native scroll bar to work on iPad, iPhone, and some Android Tablets.

Usage

HTML Structure

The following is the HTML structure required for the work of the scroll bar plug-in:

The Code is as follows:

... Content here...

The class names of nano and nano-content can be changed through the plug-in parameters (the CSS file of the plug-in needs to be changed after the change ).

CSS style

In HTML

Introduce the nanoscroller.css file.

The Code is as follows:

You must specify a width and height for the container and customize some basic styles for your scroll bar, for example:

The Code is as follows:

. Nano {background: # bba; width: 500px; height: 500px ;}
. Nano>. nano-content {padding: 10px ;}
. Nano>. nano-pane {background: #888 ;}
. Nano>. nano-pane>. nano-slider {background: #111 ;}

JAVASCRIPT

Introduce the jquery. nanoscroller. js file to the page.

The Code is as follows: