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

Plugin: Nicescroll


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.


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


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

1. Simple mode, it styles document scrollbar:
function() {

2. Instance with object returned:

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

3. Style a DIV and chage cursor color:

function() {

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

function() {
5. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();
6. Hide scrollbars:


- 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 google

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

Leave a Comment

No Comment

© Creative3x Ltd.