jQuery中Nicescroll滚动条插件的用法
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法，Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，有需要的可以了解下。
Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定义，支持触摸事件，可在触摸屏上使用。
Nicescroll官网地址：http://www.areaaperta.com/nicescroll/
引入核心文件，插件需要引入1.5.X以上版本的jquery库
最简单的用法如下：
$(document).ready(
function(){
$("html").niceScroll();
}
);
注意：一定要放在$(document).ready中进行初始化！
隐藏滚动条
$("#mydiv").getNiceScroll().hide();
检测滚动条是否重置大小（当窗口改变大小时）
$("#mydiv").getNiceScroll().resize();
滚动到某个位置
$("#mydiv").getNiceScroll(0).doScrollLeft(x,duration);//ScrollXAxis
$("#mydiv").getNiceScroll(0).doScrollTop(y,duration);//ScrollYAxis
可增加各种参数
$(document).ready(
function(){
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);
配置参数表
$("#thisdiv").niceScroll({
cursorcolor:"#424242",//改变滚动条颜色，使用16进制颜色值
cursoropacitymin:0,//当滚动条是隐藏状态时改变透明度,值范围1到0
cursoropacitymax:1,//当滚动条是显示状态时改变透明度,值范围1到0
cursorwidth:"5px",//滚动条的宽度，单位：便素
cursorborder:"1pxsolid#fff",//CSS方式定义滚动条边框
cursorborderradius:"5px",//滚动条圆角（像素）
zindex:"auto"|<number>,//改变滚动条的DIV的z-index值
scrollspeed:60,//滚动速度
mousescrollstep:40,//鼠标滚轮的滚动速度(像素)
touchbehavior:false,//激活拖拽滚动
hwacceleration:true,//激活硬件加速
boxzoom:false,//激活放大box的内容
dblclickzoom:true,//(仅当boxzoom=true时有效)双击box时放大
gesturezoom:true,//(仅boxzoom=true和触屏设备时有效)激活变焦当out/in（两个手指外张或收缩）
grabcursorenabled:true//(仅当touchbehavior=true)显示“抓住”图标display"grab"icon
autohidemode:true,//隐藏滚动条的方式,可用的值:
true|//无滚动时隐藏
"cursor"|//隐藏
false|//不隐藏,
"leave"|//仅在指针离开内容时隐藏
"hidden"|//一直隐藏
"scroll",//仅在滚动时显示
background:"",//轨道的背景颜色
iframeautoresize:true,//在加载事件时自动重置iframe大小
cursorminheight:32,//设置滚动条的最小高度(像素)
preservenativescrolling:true,//你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
railoffset:false,//可以使用top/left来修正位置
bouncescroll:false,//(onlyhwaccell)启用滚动跳跃的内容移动
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标题(类似对象拖动)
cursorfixedheight:false,//修正光标的高度（像素）
hidecursordelay:400,//设置滚动条淡出的延迟时间（毫秒）
directionlockdeadzone:6,//设定死区，为激活方向锁定（像素）
nativeparentscrolling:true,//检测内容底部便于让父级滚动
enablescrollonselection:true,//当选择文本时激活内容自动滚动
cursordragspeed:0.3,//设置拖拽的速度
rtlmode:"auto",//DIV的水平滚动从左边开始
cursordragontouch:false,//使用触屏模式来实现拖拽
oneaxismousemode:"auto",//当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
scriptpath:""//为boxmode图片自定义路径(""=>samescriptpath)
preventmultitouchscrolling:true//防止多触点事件引发滚动
});
另外注意：当在同一页面中使用多个nicescroll插件时，要及时隐藏用完的nicescroll对象，加载时，需要先show,再resize。
当插件放在具有absolute浮动的容器中，并设置了top值时，插件的top会出现问题，解决方法使用插件的railoffset属性：
railoffset,youcanaddoffsettop/leftforrailposition(default:false)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。