正文 4021字数 153,614阅读

jQuery.NiceScroll；一个模仿ios/mobile滚动条风格美化浏览器；1、简单模式，使用默认样式；$(document).ready(functi；$("html").nice；});；2、作为实例和对象返回；varnice=false;；$(document).ready(functi；nice=$("html 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" | <number>, // 设置滚动条的层数值 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)
Run code
Cut to clipboard