Create a Mac Lion OS-like scroll bar using jQuery

Create a Mac Lion OS-like scroll bar using jQuery

This article uses nanoscrollerjs to easily implement the special effect of the Mac OS system scroll bar effect, as well as the use methods and parameters of this plug-in, which 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:

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

 

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

Introduce the nanoscroller.css file in HTML

 

The Code is 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:

 

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:

<Script type = "text/javascript" src = "js/jquery. nanoscroller. js"> </script>

 

Then, use the following method to call the scroll bar plug-in. All DOM elements with. nano in HTML will be applied to this method:

 

The Code is as follows:

$ (". Nano"). nanoScroller ();

 

Advanced Method

Scroll to the top:

The Code is as follows:

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

 

Scroll to the bottom:

 

The Code is as follows:

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

 

Scroll to the top with an offset value:

 

The Code is as follows:

$ (". Nano"). nanoScroller ({scrollTop: value });

 

Scroll to the bottom with an offset value:

The Code is as follows:

$ (". Nano"). nanoScroller ({scrollBottom: value });

 

Scroll an element:

 

Copy the Code as follows:

$ (". Nano"). nanoScroller ({scrollTo: $ ('# a_node ')});

 

Stop rolling. This option will invalidate all binding events of the scroll bar plug-in and hide the scroll bar on the UI.

 

The Code is as follows:

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

 

Destroy

Destroy the nanoScroller scroll bar and reset it to the browser's native scroll bar:

 

The Code is as follows:

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

 

Set the flashing time of the scroll bar, which is set by the parameter (1.5 seconds by default ).

 

The Code is as follows:

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

 

NanoScroller ();

Refresh the scroll bar. This operation will simply re-calculate the position and height of the scroll bar:

 

The Code is as follows:

$ (". Nano"). nanoScroller ();

 

Custom events

Scrollend

A custom scrollend event is triggered every time the scroll bar is scrolled to the bottom of the container. (This event is not triggered when the scroll bar has reached the bottom of the container and the user scrolls again)

 

The Code is as follows:

$ (". Nano"). bind ("scrollend", function (e ){
Console. log ("current HTMLDivElement", e. currentTarget );
});

 

Some browsers trigger this event multiple times at the same time, so you should use jQuery. bind or. on to bind this event. You can use the jquery-debounce plug-in to make the browser trigger this event every 100 milliseconds:

 

The Code is as follows:

$ (". Nano"). debounce ("scrollend", function (){
Alert ("The end ");
},100 );

 

Scrolltop

The same as the scrollend event, it is triggered every time the user rolls to the top of the container.

The same as the scrollend event and scrolltop event, it is triggered every time the user scrolls. This event comes with the js object parameters of the current position, maximum height, and direction (up or down) of the scroll bar:

 

The Code is as follows:

$ (". Nano"). on ("update", function (event, values ){
Console. debug (values );
});

 

Configuration parameters

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

IOSNativeScrolling

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

Note that when iOSNativeScrolling is set to true,. pane and. slider are not generated/added by the device to support native scroll bars.

Default Value: false.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({iOSNativeScrolling: true });

 

SliderMinHeight

Set the minimum height of the scroll element:

Default Value: 20.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({sliderMinHeight: 40 })

 

SliderMaxHeight

Set the maximum height of the scroll element:

Default Value: null.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({sliderMaxHeight: 200 });

 

PreventPageScrolling

When set to true, the page can be blocked when the container content is scrolled to the top or bottom:

Default Value: false.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({preventPageScrolling: true });

 

DisableResize

Set to true to prevent nanoscroller from changing the size. If you set this option to true, remember to call the reset method. Otherwise, a strange problem occurs:

Default Value: false.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({disableResize: true });

 

AlwaysVisible

Set to true to disable auto hide when the scroll bar is stopped:

Default Value: false.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({alwaysVisible: true });

 

FlashDelay

When you enable the flash option, this option is used to specify the flash latency:

Default Value: 1500.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({flashDelay: 1000 });

 

PaneClass

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

Default Value: 'nano-pane '.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({sliderClass: 'rollslider '});

 

ContentClass

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 '.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({contentClass: 'slidercontent '});

 

TabIndex

Set the order of the scrollable content. If it is set to-1, the content will be skipped using the tab key:

Default Value: 0.

 

The Code is as follows:

$ (". Nano"). nanoScroller ({tabIndex: 0 });

 

Browser compatibility

Desktop Devices

IE7 +
Firefox 3 +
Chrome
Safari 4 +
Opera 11.60 +
Mobile Devices

IOS 5 + (iPhone, iPad, and iPod Touch)
IOS 4 (with a plug-in)
Android Firefox
Android 2.2/2.3 native browser (with a plug-in)
Android Opera 11.6 (with a plug-in)
Using plug-ins to better run nanoScroller in mobile device browsers

You can use overthrow. js to make nanoScroller work better on a mobile browser. It simulates CSS overflow (overflow: auto;/overflow: scroll;) on mobile devices ;).

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

 

The Code is as follows:

<Script src = "overthrow. js"> </script>

 

Then add overthrow class to your scroll bar content div:

 

The Code is as follows:

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

 

The above describes how to use the nanoscroller plug-in. I hope you will like it.