article:
Elements Design: iPhone Music Player
article:
Foundation 3 - advanced responsive front-end framework

Plugin: Nicescroll

Advertisement

This is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars.


Compatible:

- desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
- mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry (WebWorks/Table OS), Windows Phone 7.5 Mango.

So you have scrollable divs with momentum for iPad 4+ and you have consistent scrollable areas for all desktop and mobile platforms.


Implementation

<script src="jquery.nicescroll.js"></script>


Example
1. Simple mode, it styles document scrollbar:
$(document).ready(
function() {
$("html").niceScroll();
}
);



2. Instance with object returned:

var nice = false;
$(document).ready(
function() {
nice = $("html").niceScroll();
}
);



3. Style a DIV and chage cursor color:

$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);



4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:

$(document).ready(
function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
}
);
5. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();
6. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();


Features

- simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
- very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
- you can style main document scrollbar (body) too!! (not all script implements this feature)
- on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
- scroll is smooth (as modern tablet browsing), speed is customizable
- zoom feature
- hardware accelerated scroll (where available)
- animation frame support for smoth scrolling and cpu-saving
- dragging scroll mode with scrolling momentum (as touch device)
- tested for all major browsers desktop and mobile versions
- support for touch devices
- support for multi-input devices (IE10 with MSPointer)
- compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!
- very customizable aspect of bar
- native scroll events are working yet
- fully integrated with jQuery
- compatibile with jQuery UI, jQuery Touch, jQuery Mobile




source
source google
github
demo

Advertisement
Tags: scroll, js, jquery, javascript, developer, design

Leave a Comment

No Comment

© Creative3x Ltd.