wordpress plugin - live examples - download from Google Code - tracker on GitHub   Flattr this 

Do you know about Nicescroll 3?

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.

NOW support HORIZONTAL scrollbar too!

Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices.

It supports DIVs, IFrames, textarea, and document page (body) scrollbars.

Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango and Windows Phone 8.
Compatible with all touch devices: iPad, Window Surface.
Compabible with multi-input device (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.
Compatible with 2 directions mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).

On modern browsers hardware accelerated scrolling has implemented.
Using animationFrame for a smoothest and cpu-saving scrolling. (if browser supports)

It works with all main browsers on mobile and desktop devices

Tested on major devices


iOS 4, 5 and 6


iOS 4, 5 and 6

iPad Mini

iOS 6+

iPod Touch

iOS 4+

Android phones

version 2.3+, 4+

Android tablets

version 2.3+, 4+

Windows phones

WP 8 and WP 7.5 (Mango)

Microsoft Surface

IE 10 (touch)

Playbook RIM

Playbook OS 2.0+

Desktop browsers

Microsoft Internet Explorer Family






Others Browsers for Windows/Mac/Linux

Chrome 2+

Firefox 3+

Opera 9.5+

Safari 4+


Mobile browsers

Android 4+

Android 2+

iOS Safari 4+

Windows Phone 8

Windows Phone 7


Chrome iOS

Opera Mini


Compatible Pointing Devices

Desktop Touch

Magic Mouse



How to use

Recall ALWAYS in (document) ready statement. (use jQuery ready function)


It's a plugin for the jquery framework, you need to include jquery in your scripts.
From 1.5.x version and on. (you can try with 1.4.x also)


Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script:

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


1. Simple mode, it styles document scrollbar (html element prefered):

function() {

2. Instance with object returned:

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

3. Style a DIV and change 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:


7. Check for scrollbars resize (when content or position have changed):

For more features see live examples page.

Configuration parameters

When you call "niceScroll" you can pass some parameters to custom visual aspects:


Copyright 2011-15*InuYaksa
Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php