jQuery nice scroll bar

How to use

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

INSTALLATION

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>

EXAMPLES  here is the demo / Download

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

$(document).ready(
function() 
$("html").niceScroll();

);

2. Instance with object returned:

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

);

3. Style a DIV and change 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();

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

$("#mydiv").getNiceScroll().resize();

 

Configuration parameters which can use

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

• cursorcolor – change cursor color in hex, default is “#000000″


• cursoropacitymin – change opacity very cursor is inactive (scrollabar “hidden” state), range from 1 to 0, default is 0 (hidden)


• cursoropacitymax – change opacity very cursor is active (scrollabar “visible” state), range from 1 to 0, default is 1 (full opacity)


• cursorwidth – cursor width in pixel, default is 5 (you can write “5px” too)


• cursorborder – css definition for cursor border, default is “1px solid #fff”


• cursorborderradius – border radius in pixel for cursor, default is “4px”


• zindex – change z-index for scrollbar div, default value is 9999


• scrollspeed – scrolling speed, default value is 60


• mousescrollstep – scrolling speed with mouse wheel, default value is 40 (pixel)


• touchbehavior – enable cursor-drag scrolling like touch devices in desktop computer (default:false)


• hwacceleration – use hardware accelerated scroll when supported (default:true)


• boxzoom – enable zoom for box content (default:false)


• dblclickzoom – (only when boxzoom=true) zoom activated when double click on box (default:true)


• gesturezoom – (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)


• grabcursorenabled, display “grab” icon for div with touchbehavior = true, (default:true)


• autohidemode, how hide the scrollbar works, true=default / “cursor” = only cursor hidden / false = do not hide


• background, change css for rail background, default is “”


• iframeautoresize, autoresize iframe on load event (default:true)


• cursorminheight, set the minimum cursor height in pixel (default:20)


• preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)


• railoffset, you can add offset top/left for rail position (default:false)


• bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)


• spacebarenabled, enable page down scrolling when space bar has pressed (default:true)


• railpadding, set padding for rail bar (default:top:0,right:0,left:0,bottom:0)


• disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)


• horizrailenabled, nicescroll can manage horizontal scroll (default:true)


• railalign, alignment of vertical rail (defaul:”right”)


• railvalign, alignment of horizontal rail (defaul:”bottom”)


• enabletranslate3d, nicescroll can use css translate to scroll content (default:true)


• enablemousewheel, nicescroll can manage mouse wheel events (default:true)


• enablekeyboard, nicescroll can manage keyboard events (default:true)


• smoothscroll, scroll with ease movement (default:true)


• sensitiverail, click on rail make a scroll (default:true)


• enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)


• cursorfixedheight, set fixed height for cursor in pixel (default:false)


• hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)


• directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)


• nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)


• enablescrollonselection, enable auto-scrolling of content when selection text (default:true)

jQuery nice scroll bar