jquery makes imitation mac Lion OS scroll bar effect _jquery

Nanoscrollerjs is a jquery plug-in that uses a simple way to implement the Mac OS X Lion system scroll bar effect. The 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 run. The scroll bar plug-in uses native scrollbars to work on the IPad, IPhone, and some Android tablets.

How to use

HTML structure

The following is the HTML structure necessary for the scroll bar plug-in to work:

Copy Code code as follows:

<div id= "About" class= "nano" >
<div class= "Nano-content" > ... content here ... </div>
</div>

The class name of the Nano and Nano-content can be changed by plug-in parameters (the CSS file of the plugin will change accordingly).

CSS Styles

Introduce nanoscroller.css files in HTML

Copy Code code as follows:

<link rel= "stylesheet" href= "Nanoscroller.css" >

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

Copy Code code 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.

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery.nanoscroller.js" ></script>

The scroll bar plug-in is then invoked using the following method, and all DOM elements with the. Nano in HTML are applied to this method:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ();

Advanced methods

Scroll to the top:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({scroll: ' top '});

Scroll to bottom:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({scroll: ' bottom '});

Scroll to the top and with an offset value:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({scrolltop:value});

Scroll to the bottom with an offset value:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({scrollbottom:value});

To scroll an element:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({scrollto: $ (' #a_node ')});

Stops the scrolling operation. This option will invalidate all bound events for the scroll bar plug-in and hide the scroll bars on the UI.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({stop:true});

Destroy

Destroys the Nanoscroller scroll bar and resets the scroll bar to the browser native scroll bar:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({destroy:true});

Sets the scroll bar to flicker and the flashing time is set by the parameter (default 1.5 seconds).

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({flash:true});

Nanoscroller ();

Refreshes the scroll bar. This operation simply recalculates the scroll bar's position and height:

Copy Code code as follows:

$ (". Nano"). Nanoscroller ();

Custom events

Scrollend

A custom Scrollend event is triggered each time the scroll bar scrolls to the bottom of the container. (When the scroll bar has reached the bottom of the container, the event is not triggered when the user scrolls again)

Copy Code code as follows:

$ (". Nano"). Bind ("Scrollend", function (e) {
Console.log ("Current Htmldivelement", e.currenttarget);
});

Some browsers trigger the event multiple times at the same time, so you should use jquery. bind or. On to bind the event. You can use the Jquery-debounce plugin to enable the browser to trigger this event every 100 milliseconds:

Copy Code code as follows:

$ (". Nano"). Debounce ("Scrollend", function () {
Alert ("the End");
}, 100);

ScrollTop

The same as the Scrollend event, which is triggered each time the user scrolls to the top of the container.

The same as the Scrollend event and the ScrollTop event, which is triggered each time the user scrolls. This event comes with a JS object parameter with the current position of the scroll bar, maximum height and direction (up or down):

Copy Code code as follows:

$ (". Nano"). On ("Update", function (event, values) {
Console.debug (values);
});

Configuration parameters

The scroll bar plug-in has a set of parameters that can be used:

Iosnativescrolling

If you want to use the native scroll bars in IOS 5+, you can set to true. The native scroll bar in IOS 5+ will work better.

Note When Iosnativescrolling is set to True,. pane and. Slider are not generated/added by the device to support native scroll bars.

Default value: False.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({iosnativescrolling:true});

Sliderminheight

To set the minimum height of a scrolling element:

Default value: 20.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({sliderminheight:40})

Slidermaxheight

To set the maximum height of a scrolling element:

Default value: null.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({slidermaxheight:200});

Preventpagescrolling

When set to True, prevents the page from scrolling when the contents of the container scroll to the top or bottom:

Default value: False.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({preventpagescrolling:true});

Disableresize

Set to True to prevent Nanoscroller from changing size. If you set this option to true, remember to call the Reset method, or else you may have a strange problem:

Default value: False.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({disableresize:true});

Alwaysvisible

Set to True to turn off auto hide when scroll bars stop:

Default value: False.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({alwaysvisible:true});

Flashdelay

When you turn on the Flash option, this option specifies the flashing delay:

Default value: 1500.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({flashdelay:1000});

Paneclass

The class name of the track element for the scroll bar. If you modify it, you need to modify it in the CSS file:

Default value: ' Nano-pane '.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({sliderclass: ' Scrollslider '});

Contentclass

The class name of the scroll bar container div. If you modify it, you need to modify it in the CSS file:

Default value: ' Nano-content '.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({contentclass: ' slidercontent '});

TabIndex

Set the order of scrollable content, set to-1 when you use the TAB key to skip the content:

Default value: 0.

Copy Code code as follows:

$ (". Nano"). Nanoscroller ({tabindex:0});

Browser compatible

Desktop devices

ie7+
Firefox 3+
Chrome
Safari 4+
Opera 11.60+
Mobile devices

IOS 5+ (IPhone, IPad and ipod Touch)
IOS 4 (comes with a plugin)
Android Firefox
Android 2.2/2.3 Native Browser (comes with a plugin)
Android Opera 11.6 (comes with a plugin)
Better run Nanoscroller through Plug-ins in mobile device browsers

You can use Overthrow.js to make Nanoscroller work better on mobile browsers. It simulates the overflow of CSS on a mobile device (overflow:auto;/overflow:scroll; ）。

To use overthrow, introduce overthrow.js to the page:

Copy Code code as follows:

<script src= "Overthrow.js" ></script>

Then add overthrow class to your scroll bar content div:

Copy Code code as follows:

<div id= "About" class= "nano" >
<div class= "Overthrow Nano-content" > ... content here ... </div>
</div>

The above is about the use of Nanoscroller plug-ins, I hope you can enjoy.