Jquery custom scroll bar plug-in, jquery custom scroll bar
: Http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js
<script src="jquery.nicescroll.js"></script>
$(document).ready(function() {$("html").niceScroll();});
var nice = false;$(document).ready(function() {nice = $("html").niceScroll();});
$(document).ready(function() {$("#thisdiv").niceScroll({cursorcolor:"#00F"});});
$(document).ready(function() {$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});});
var nice = $("#mydiv").getNiceScroll();
$("#mydiv").getNiceScroll().hide();
$("#mydiv").getNiceScroll().resize();
Introduction to some plug-ins
Configuration parameters
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 dynamic 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)
