jQuery.nicescroll 中文API
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jQuery.NiceScroll
一个模仿ios/mobile滚动条风格美化浏览器滚动条的jQuery插件。NiceScroll初始化声明文档
1、简单模式,使用默认样式。
$(document).ready(function() {
$("html").niceScroll();
});
2、作为实例和对象返回
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
3、设置光标颜色
$(document).ready(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
4、Div包裹,由两个div组成,第一个是包裹div,第二的才是滚动div
$(document).ready(function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); });
5、获取nicescroll对象
var nice = $("#mydiv").getNiceScroll();
6、隐藏滚动条
$("#mydiv").getNiceScroll().hide();
7、检查滚动条大小变化(当窗口大小变化时滚动条跟着变化)
$("#mydiv").getNiceScroll().resize();
8、滚动到指定位置
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // 沿X轴滚动 $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // 沿Y轴滚动
参数一:滚动距离,正数X轴向右滚动、Y轴向下滚动,负数反之。
参数二:滚动持续时间
9、配置参数
$("#thisdiv").niceScroll({
cursorcolor:"#424242", // 设置光标颜色
cursoropacitymin:0, // 设置非活动状态光标透明度,取值范围0-1,默认为0。
cursoropacitymax:1, //设置活动状态光标透明度,取值范围0-1,默认为1。cursorwidth:"5px", //设置光标宽度
cursorborder:"1px solid #fff",// 设置光标边框
cursorborderradius:"5px", //设置光标圆角,默认5px
zindex:"auto" |
scrollspeed:60, //滚动速度,单位秒
mousescrollstep:40, //每次滚动距离
touchbehavior:false, //设置触摸滑动。默认值false
hwacceleration:true, //使用硬件加速滚动支持
boxzoom:false, // 设置是否可以放大容器,默认值false
dblclickzoom:true, //双击放大/缩小容器(当boxzoom为true有效)。默认值为true gesturezoom:true, // 是否支持手指缩进或放大容器(当boxzoom为true并且在touch设备上)
grabcursorenabled:true//设置是否显示为grab(手掌)状态(当touchbehavior=true生效) autohidemode:true, // 怎样隐藏滚动条,可能的值有:
true | // 当不滚动隐藏
"cursor" | //仅光标隐藏
false | // 不隐藏
"leave" | // 当光标离开容器时隐藏
"hidden" | // 总是隐藏
"scroll", //仅滚动时显示
background:"", // 设置滚动条背景颜色
iframeautoresize:true, // 当框架载入时自动设置大小
cursorminheight:32, // 设置光标最小大小
preservenativescrolling:true, //设置是否可以使用鼠标滚动, 冒泡鼠标滚动事件
railoffset:false, //添加滚动位移
bouncescroll:false, // 设置是否显示反弹(需要硬件支持)
spacebarenabled:true, // 设置是否支持空格键滚动
railpadding: { top:0, right:0, left:0, bottom:0 }, // 设置滚动条距离边框的距离disableoutline:true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll禁用nicesroll容器选中时chrome浏览器默认产生轮廓线(黄色高亮)
horizrailenabled:true, //设置nicescroll是否美化水平滚动条
railalign: right, //滚动条水平对齐方式
railvalign: bottom, // 滚动条垂直对齐方式
enabletranslate3d:true, // 设置nicescroll是否可以使用CSS translate属性滚动内容enablemousewheel:true, // 设置nicescroll是否可以管理鼠标事件
enablekeyboard:true, //设置nicescroll是否可以管理键盘事件
smoothscroll:true, //平滑滚动
sensitiverail:true, // 点击滚动条,滚动到指定位置
enablemouselockapi:true, // 可以使用鼠标扑捉API(在对象拽托存在一些问题)*这一句蒙的can use mouse caption lock API (same issue on object dragging)
cursorfixedheight:false, //设置固定高度游标
hidecursordelay:400, //设置光标隐藏延迟时间
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, // 设置选择文本时是否自动滚动
cursordragspeed:0.3, // 设置选中文本时光标滚动速度
rtlmode:"auto", //水平滚动条从左方开始
cursordragontouch:false, // touch设备上鼠标展现拽托状态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)