前言

官方已经给出很好的文档了。在此本人总结下，方便以后查阅：

GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad

nicescroll是一个jquery的插件，需要先包含jquery，再使用这框架，NiceScroller可用于jQuery1.x/2.x/3.x版本，但不能在slim版本中使用。

使用

首先需要先保护jQuery，，然后再把jquery.nicesroll.min.js和zoomico.png放到项目中，注意，zoomico.png要和jquery.nicescroll.min.js放到同一个目录下。

注意：如果不需要使用NiceScroll提供了zoom功能，就不需要加入zoomic.png图片。

通常在document的ready的时候的初始化NiceScroll

// 1. Simple mode, it styles document scrollbar:【直接替换传统的scroll】
$(function() {  
    $("body").niceScroll();
});

// 2. Instance with object returned:【获取body中替换的NiceScroll对象】
var nice = false;
$(function() {  
    nice = $("body").niceScroll();
});

// 3. Style a DIV and change cursor color:【改变div的style】
$(function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
});

// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:【div嵌套时的用法，外层的叫viewport，内层的是warpper】
$(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});

// 5. Get nicescroll object:【获取NiceScroll对象】
var nice = $("#mydiv").getNiceScroll();

// 6. Hide scrollbars:【隐藏Scrollbars】
$("#mydiv").getNiceScroll().hide();

// 7. Check for scrollbars resize (when content or position have changed):【当内容和位置发生改变时，就要使用resize这个函数了】
$("#mydiv").getNiceScroll().resize();

// 8. Scrolling to a position:【获取sroll的位置，x轴和y轴】
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

NiceScroll相关参数

$("#thisdiv").niceScroll({
    cursorcolor: "#424242", // change cursor color in hex
    cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
    cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
    cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
    cursorborder: "1px solid #fff", // css definition for cursor border
    cursorborderradius: "5px", // border radius in pixel for cursor
    zindex: "auto" | [number], // change z-index for scrollbar div
    scrollspeed: 60, // scrolling speed
    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
    touchbehavior: false, // DEPRECATED!! use "emulatetouch"
    emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
    hwacceleration: true, // use hardware accelerated scroll when supported
    boxzoom: false, // enable zoom for box content
    dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box
    gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
    grabcursorenabled: true // (only when touchbehavior=true) display "grab" icon
    autohidemode: true, // how hide the scrollbar works, possible values: 
      true | // hide when no scrolling
      "cursor" | // only cursor hidden
      false | // do not hide,
      "leave" | // hide only if pointer leaves content
      "hidden" | // hide always
      "scroll", // show only on scroll          
    background: "", // change css for rail background
    iframeautoresize: true, // autoresize iframe on load event
    cursorminheight: 32, // set the minimum cursor height (pixel)
    preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event
    railoffset: false, // you can add offset top/left for rail position
    bouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like 
    spacebarenabled: true, // enable page down scrolling when space bar has pressed
    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bar
    disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
    horizrailenabled: true, // nicescroll can manage horizontal scroll
    railalign: right, // alignment of vertical rail
    railvalign: bottom, // alignment of horizontal rail
    enabletranslate3d: true, // nicescroll can use css translate to scroll content
    enablemousewheel: true, // nicescroll can manage mouse wheel events
    enablekeyboard: true, // nicescroll can manage keyboard events
    smoothscroll: true, // scroll with ease movement
    sensitiverail: true, // click on rail make a scroll
    enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)
    cursorfixedheight: false, // set fixed height for cursor in pixel
    hidecursordelay: 400, // set the delay in microseconds to fading out scrollbars
    directionlockdeadzone: 6, // dead zone in pixels for direction lock activation
    nativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll does
    enablescrollonselection: true, // enable auto-scrolling of content when selection text
    cursordragspeed: 0.3, // speed of selection when dragged with cursor
    rtlmode: "auto", // horizontal div scrolling starts at left side
    cursordragontouch: false, // drag cursor in touch / touchbehavior mode also
    oneaxismousemode: "auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
    scriptpath: "" // define custom path for boxmode icons ("" => same script path)
    preventmultitouchscrolling: true // prevent scrolling on multitouch events
    disablemutationobserver: false // force MutationObserver disabled,
    enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed
    scrollbarid: false // set a custom ID for nicescroll bars 
});

此处用个表简单解释下：

| property | value | description |
| cursorcolor | "#424242" | 改变光标颜色（十六进制） |
| cursoropacitymin | 0 | 当光标是无效状态时改变其透明度，范围从1到0 |
| cursoropacitymax | 1 | 当光标是有效状态时改变其透明度，范围从1到0 |
| cursorwidth | "5px" | 光标的宽度为5像素 |
| cursorborder | "1px solid #fff" | 使用css定义光标包边 |
| cursorborderradius | "5px" | 光标的包边半径（改包边为圆弧） |
| zindex | "auto" | [number] | 改变光标div的z-index |
| scrollspeed | 60 | 光标速率 |
| mousescrollstep | 40 | 用滚轮滚动的光标速率 |
| touchbehavior | false | 不要使用，改用emulatetouch |
| emulatetouch | false | 开启cursor-darg功能（像触屏滚动的那个效果） |
| hwacceleration | true | hw是hardware，使用硬件加数功能 |
| boxzoom | false | 开启内容放缩功能 |
| dbclickzoom | true | 当boxzoom为true时使用，当鼠标双击时zoom为激活状态 |
| gesturezoom | true | 当boxzoom为true、touch devices为true时使用 |
| grabcursorenabled | true | 当touchbehavior=true时生效，展示"grab"图标 |
| autohidemode | true<br> "cursor"<br> false<br> "leave"<br> "hidden"<br> "scroll" | 当不滚动时，scrolllbar被隐藏；<br> 仅光标被隐藏；<br> 不隐藏；<br> 仅隐藏上下箭头；<br> 隐藏；<br> 只有在滚的时候显示 |
| background | "" | 使用css定义background |
| iframeautoresize | true | auto resize |
| cursorminheight | 32 | 设置光标最小高度 |
| preservenatviescrolling | true | 使用原始的滚轮 |
| radiloffset | false | 为rail postiont添加top/left的偏移 |
| bouncescroll | false | (only hw accell) enable scroll bouncing at the end of content as mobile-like |
| spacebarenabled | true | enable page down scrolling when space bar has pressed |
| railpadding | {top: 0, right: 0, left 0, bottom: 0} | 给rail bar设置padding |
| disableoutline | true | for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll |
| horizrailenabled | true | nicescroll can manage horizontal scroll |
| railalign | right | 垂直滑轨的位置 |
| railvalign | bottom | 水平滑轨的位置 |
| enabletranslate3d | true | nicescroll can use css translate to scroll content |
| enablemousewheel | true | nicescroll can manage mouse wheel events |
| enablekeyboard | true | nicescroll can manage keyboard events |
| smoothscroll | true | scroll with ease movement |
| sensitiverail | true | click on rail make a scroll |
| enablemouselockapi | true | can use mouse caption lock API (same issue on object dragging) |
| cursorfixedheight | false | 设置光标固定高度 |
| hidecursordelay | 400 | set the delay in microseconds to fading out scrollbars |
| directionlockdeadzone | 6 | dead zone in pixels for direction lock activation |
| nativeparentscrolling | true | detect bottom of content and let parent to scroll, as native scroll does |
| enablescrollonselection | true | enable auto-scrolling of content when selection text |
| cursordragontouch | 0.3 | speed of selection when dragged with cursor |
| oneaxismousemode | "auto" | horizontal div scrolling starts at left side |
| scriptpath | "" | drag cursor in touch / touchbehavior mode also |
| preventmultitouchscrolling | true | it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse |
| disablemutationobserver | false | force MutationObserver disabled |
| enableobserver | true | enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed<br>     scrollbarid: false // set a custom ID for nicescroll bars  |
| scrollbarid | false | set a custom ID for nicescroll bars |