滚动条插件使用

因IE和google等滚动条美化方式不一致，想做到两者兼容光设置css不起作用，故而使用滚动条插件。

一、slimScroll

下载地址：
源码地址：https://github.com/rochal/jQuery-slimScroll
修改过的源码地址：https://github.com/kujian/jQuery-slimScroll
特性：
1）slimScroll不占用任何视觉空间，因为它只出现在用户鼠标移入到这个div上的时候，也就是说，当用户进行onmouseover等鼠标移入的动作，这个好看的滚动条才会显示出来
2）目前只支持纵向滚动条
3）依赖jquery

参数设置：

$(function() {
      $("#inner-content").slimScroll({
        width: '100%', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //滚动条宽度，即组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});

slimScroll事件——当滚动条达到父容器的顶部或底部触发事件

$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

二、niceScroll

官网地址：http://www.areaaperta.com/nicescroll/
GitHub下载地址：https://github.com/inuyaksa/jquery.nicescroll

*参数设置：

$(function() {
    $("#inner-content").niceScroll({
        zindex: "auto",
        cursoropacitymin: 0,  // 当滚动条是隐藏状态时改变透明度，值范围1到0
        cursoropacitymax: 1,  // 当滚动条是显示状态时改变透明度，值范围1到0
        cursorcolor: "#424242",  // 滚动条颜色，使用16进制颜色值
        cursorwidth: "6px",  // 滚动条的宽度，单位：像素
        cursorborder: "1px solid #fff",  // CSS 方式定义滚动条边框
        cursorborderradius: "5px",  // 滚动条圆角（像素）
        scrollspeed: 40,  // 滚动速度
        mousescrollstep: 9 * 3,  // 鼠标滚动的滚动速度（像素）
        touchbehavior: false,   // deprecated  激活拖拽滚动 （不赞成，不宜用）
        emulatetouch: false,    // replacing touchbehavior  emulate（仿真）
        hwacceleration: true,  // 激活硬件加速
        usetransition: true,
        boxzoom: false,  // 激活放大box的内容
        dblclickzoom: true,  // （仅当 boxzoom=true 时有效）双击 box 时放大
        gesturezoom: true,  // （仅 boxzoom=true 和触屏设备时有效）激活变焦当 out/in （两个手指外账或收缩）
        grabcursorenabled: true,  // （仅当 透彻behavior=true）显示“抓住”图标     display "grab" icon
        autohidemode: true,  // 隐藏滚动条的方式，可用的值：true|无滚动时隐藏，"cursor"|隐藏，false|不隐藏，"leave"|仅在指针离开内容时隐藏，"hidden"|一直隐藏，"scroll"|仅在滚动时显示
        background: "",  // 轨道的背景颜色
        iframeautoresize: true,  // 在加载事件时自动重置 iframe 大小
        cursorminheight: 32,  // 设置滚动条的最小高度（像素）
        preservenativescrolling: true,  // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
        railoffset: false,  // 可以使用 top/left 来修正位置
        railhoffset: false, 
        bouncescroll: true,  // （only hw accell）启用滚动跳跃的内容移动
        spacebarenabled: true,  // 当按下空格时使页面向下滚动
        railpadding: {  // 设置轨道的内间距
        top: 0,
        right: 0,
        left: 0,
        bottom: 0
        },
        disableoutline: true,  // 当选中一个使用 niceScroll 的 div 时，Chrome浏览器中禁用 outline 
        horizrailenabled: true,  // niceScroll 可以管理水平滚动
        railalign: "right",  // 对齐垂直轨道
        railvalign: "bottom",  // 对齐水平轨道
        enabletranslate3d: true,  // niceScroll 可以使用 CSS 变型来滚动内容
        enablemousewheel: true,  // niceScroll 可以管理鼠标滚轮事件
        enablekeyboard: true,  // niceScroll 可以管理键盘事件
        smoothscroll: true,  // ease 动画滚动
        sensitiverail: true,  // 单击轨道产生滚动
        enablemouselockapi: true,  // 可以用鼠标锁定 API 标题（类似对象拖动）
        //      cursormaxheight:false,
         cursorfixedheight: false,  // 修正光标的高度（像素）
        directionlockdeadzone: 6,  // 设定死区，为激活方向锁定（像素）
        hidecursordelay: 400,  // 设置滚动条淡出的延迟时间（毫秒）
        nativeparentscrolling: true,  // 检测内容底部便于让父级滚动
        enablescrollonselection: true,  // 当选择文本时激活内容自动滚动
        overflowx: true,
        overflowy: true,
        cursordragspeed: 0.3,  // 设置拖拽的速度
        rtlmode: "auto",  // DIV 的水平滚动从左边开始
        cursordragontouch: false,  // 使用触屏模式来实现拖拽
        oneaxismousemode: "auto",  // 当只用水平滚动时可以用鼠标来滚动，如果设为 false 则不支持水平滚动，如果设为 auto 支持双轴滚动
        scriptpath: getScriptPath(),  // 为 boxmode 图片自定义路径
        preventmultitouchscrolling: true,  // 防止多触点时间引发滚动
        disablemutationobserver: false,
        enableobserver: true,
        scrollbarid: false
    });
});

隐藏滚动条

$("#myDiv").getNiceScroll().hide();

移除滚动条

$("#myDiv").getNiceScroll().remove();

检测滚动条是否重置大小（当窗口改变大小时）

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

滚动到某个位置

$("#myDiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis

$("#myDiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

另外注意：当在同一页面中使用多个 niceScroll 插件时，要及时隐藏用完的 niceScroll 对象，加载时，需要先 show，再 resize。

当插件放在具有 absolute 浮动的容器中，并设置了 top 值时，插件的 top 会出现问题，解决方法使用插件的 railoffset 属性：
railoff，you can add offset top/left for rail position (default: false)

nav结合niceScroll使用

$(function(){
	$("#div1").niceScroll('#div1_',{
        cursorcolor : 'rgb(0,250,255)',
        cursoropacitymin: 0.8,
        cursorwidth:4,
        cursorborder: "1px solid rgba(0,250,255,0.8)",
        autohidemode:"true"
    });
    
    $("#div2").niceScroll('#div2_',{
        cursorcolor : 'rgb(0,250,255)',
        cursoropacitymin: 0.8,
        cursorwidth:4,
        cursorborder: "1px solid rgba(0,250,255,0.8)",
        autohidemode:"true"
    });
    
	$(window).resize(function() {
        $("#div1,#div2").getNiceScroll().resize();
    });

    $('#myTab a').click(function (e) { 
        var id = e.target.id;
        e.preventDefault();
        $(this).tab('show');
        //切换滚动条
        $("#div1,#div2").getNiceScroll().hide();
        
        switch (id){
        case 'div1-tab':
            $("#div1").getNiceScroll().resize();
            $("#div1").getNiceScroll().show();
            break;
        case 'div2-tab':
            $("#div2").getNiceScroll().resize();
            $("#div2").getNiceScroll().show();
            break;
        }
    }); 
 });