nanoScroller.js - Implementing Lion OS scrollbars

nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: jamesflorentino.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/nanoscroller.css">
<script type="text/javascript" src="javascripts/overthrow.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>

2. HTML

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

Change .nano into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. #parent > .nano.nano and nano-content classnames can be customized via plugin options (in that case you must rename them inside the plugin's CSS file as well).

3. 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 .nano-content { padding: 10px; }
.nano .nano-pane   { background: #888; }
.nano .nano-slider { background: #111; }

4. JAVASCRIPT

Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className.

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

5. OPTIONS

There are a few options that you can change when running nanoScroller, e.g. $(".nano").nanoScroller({ paneClass: 'myclass' });

iOSNativeScrolling

Set to true if you want to use native scrolling in iOS 5+. This will disable your custom nanoScroller scrollbar in iOS 5+ and use the native one instead. While the native iOS scrollbar usually works much better

Notice that .pane and .slider elements are not generated/added for devices that support iOS native scrolling when iOSNativeScrolling option is enabled.

Default: false

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

sliderMinHeight

Sets the minimum height of the slider element.

Default: 20

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

sliderMaxHeight

Sets the maximum height of the slider element.

Default: null

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

preventPageScrolling

Set to true to prevent page scrolling when top or bottom inside the content div is reached.

Default: false

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

disableResize

Set to true to disable the resize from nanoscroller. Useful if you want total control of the resize event. If you set this option to true remember to call the reset method so that the scroll don't have strange behavior.

Default: false

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

alwaysVisible

Set to true to stop the scrollbar from auto-hiding itself.

Default: false

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

flashDelay:

Use this setting to specify the scrollbar hide delay in milliseconds if you have enabled the flash option.

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

Default: 1500

paneClass

A classname for scrollbar track element. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-pane'

$(".nano").nanoScroller({ paneClass: 'scrollPane' });

sliderClass

A classname for scrollbar thumb element. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-slider'

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

contentClass

A classname for your content div. If you change this setting, you also have to change it in the plugin's CSS file.

Default: 'nano-content'

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

tabIndex

Set the tab order of the scrollable content. Set to -1 to skip over the scrollable content when tabbing.

Default: 0

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

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

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

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

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

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

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

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

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

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

7. EVENTS

'scrollend': A custom 'scrollend' event is triggered on the element every time the user has scrolled to the end of the content element (does not get triggered more than once when user tries to scroll down and has already reached the end of scrollable content).

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

Some browsers trigger this event more than once each time, so to listen to the custom event, instead of using jQuery's normal .bind or .on, you most likely want to use this tiny jQuery debounce plugin to prevent browsers from firing your function more than once every 100ms.

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

'scrolltop': Same as the 'scrollend' event, but it is triggered every time the user has scrolled to the top of the content element.

'update': Same as the 'scrolltop' and 'scrollend' events, but it's triggered every time the user scrolls. It also carries a JavaScript object with the current position, the maximum height and the direction (up ordown).

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