jQuery creates imitation Mac Lion OS scroll bar effect_jquery

nanoScrollerJS is a jQuery plug-in that uses a simple way to achieve the scroll bar effect of Mac OS X Lion system. This scrollbar plugin uses minimal HTML structure .nano > .nano-content . Other scroll bar elements .pane > .nano-slider are dynamically loaded when the plugin is running. This scrollbar plug-in uses native scrollbars to work on 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 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 plug-in parameters (after the change, the CSS file of the plug-in must also be changed accordingly).

CSS style

Introduce nanoscroller.css file into HTML <header>.

Copy code The code is as follows:

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

You have to specify a width and height for the container and customize some basic styles for your scrollbar, for example:

Copy code 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 jquery.nanoscroller.js file into the page.

Copy code 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. This method will be applied to all DOM elements with .nano in HTML:

Copy code The code is as follows:

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

Advanced methods

Scroll to top:

Copy code The code is as follows:

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

Scroll to bottom:

Copy code The code is as follows:

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

Scroll to the top with an offset:

Copy code The code is as follows:

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

Scroll to the bottom with an offset value:

Copy code The code is as follows:

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

Scroll an element:

Copy code The code is as follows:

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

Stop scrolling. This option will invalidate all bound events of the scrollbar plug-in and hide the scrollbar from the UI.

Copy code The code is as follows:

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

destroy

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

Copy code The code is as follows:

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

Set the scroll bar to flash. The flashing time is set by parameters (default 1.5 seconds).

Copy code The code is as follows:

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

nanoScroller();

Refresh the scroll bar. This operation will simply recalculate the position and height of the scroll bar:

Copy code The code is as follows:

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

Custom events

scrollend

A custom scrollend event will be triggered every time the scroll bar scrolls to the bottom of the container. (When the scroll bar has reached the bottom of the container, this event will not be triggered when the user scrolls again)

Copy code The code is as follows:

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

Some browsers will trigger this event multiple times at the same time, so jQuery .bind or .on should be used to bind this event. You can use the jquery-debounce plugin to cause the browser to trigger this event every 100 milliseconds:

Copy code The code is as follows:

$(".nano").debounce("scrollend", function() {
alert("The end");
}, 100);

scrolltop

Same as scrollend event, it is triggered every time the user scrolls to the top of the container.

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

Copy code The code is as follows:

$(".nano").on("update", function(event, values){
console.debug( values ​​);
});

Configuration parameters

There is a set of parameters available in this scroll bar plug-in:

iOSNativeScrolling

If you want to use native scrollbars in iOS 5, you can set it to true . Native scrollbars will work better in iOS 5.

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

Default value: false.

Copy code The code is as follows:

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

sliderMinHeight

Set the minimum height of the scroll element:

Default value: 20.

Copy code The code is as follows:

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

sliderMaxHeight

Set the maximum height of the scroll element:

Default value: null.

Copy code The code is as follows:

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

preventPageScrolling

Set to true to prevent the page from scrolling when the container content scrolls to the top or bottom:

Default value: false.

Copy code The code is 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, otherwise strange problems will occur:

Default value: false.

Copy code The code is as follows:

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

alwaysVisible

Set to true to turn off the automatic hiding function when the scroll bar stops:

Default value: false.

Copy code The code is as follows:

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

flashDelay

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

Default value: 1500.

Copy code 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 make corresponding changes in the CSS file:

Default: 'nano-pane'.

Copy code The code is as follows:

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

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

Default: 'nano-content'.

Copy code The code is as follows:

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

tabIndex

Set the order of scrollable content. When set to -1, using the tab key will skip the content:

Default value: 0.

Copy code The code is as follows:

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

Browser compatible

Desktop

IE7
Firefox 3
Chrome
Safari 4
Opera 11.60
Mobile devices

iOS 5 (iPhone, iPad and iPod Touch)
iOS 4 (comes with a plug-in)
Android Firefox
Android 2.2/2.3 native browser (comes with a plug-in)
Android Opera 11.6 (comes with a plug-in)
Better run nanoScroller in mobile device browsers through plug-ins

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

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

Copy code The code is as follows:

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

Then add overthrow class in your scrollbar content div:

Copy code The code is as follows:

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

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