滚动条美化插件jquery.nicescroll

概述今天给大家介绍一个滚动条美化插件jquery.nicescroll，这个插件有以下一个主意事项： 1、兼容所有最新的桌面浏览器和旧版：Chrome，Firefox，Edge，IE8 +，Safari（win / mac），Opera 2、兼容移动设备：iPad / iPhone / iPod，Android 4 +，Blackberry手机和Playbook（WebWorks / Table OS 今天给大家介绍一个滚动条美化插件jquery.nicescroll，这个插件有以下一个主意事项：

1、兼容所有最新的桌面浏览器和旧版：Chrome，firefox，Edge，ie8 +，Safari（win / mac），Opera

2、兼容移动设备：iPad / iPhone / iPod，AndroID 4 +，BlackBerry手机和Playbook（WebWorks / table OS），windows Phone 8和10

3、兼容所有触摸设备：iPad，AndroID平板电脑，Window ace

4、基于jquery 1.x / 2.x / 3.x分支使用

5、下载地址：www.npmJs.com/package/jquery.nicescroll

6、代码需要放在

$(function() {});
里面。

一、引入相应的插件

<script type="text/JavaScript" src="Js/jquery-1.12.0.min.Js"></script>
<script type="text/JavaScript" src="Js/jquery.nicescroll.min.Js"></script>

二、写好你的容器

<div ID="divs" >
<p></p>
<p></p>
</div>

三、写你的Js代码

<script type="text/JavaScript">
$(function() {
$("#divs").niceScroll({cursorcolor:"#f80516"});
});
</script>

四、然后你就可以看到一个美化过的滚动条了

当然这个插件还有很多的用法和API的。

用法可以在官网查看，下面我就用我18级英语给你们简单的翻译一下吧：

一、用法

1、简单模式

$(function() {
$("body").niceScroll();
});

2、返回对象

var nice = false;
$(function() {
nice = $("body").niceScroll();
});

3、设置参数

$(function() {
$("#divs").niceScroll({
cursorcolor:"#f80516",
cursorwIDth:‘10px‘
});
});

4、定义被嵌套的容器

$(function() {
$("#divs").niceScroll("#divs2",{cursorcolor:"#00F"});（www.gendan5.com）
});

5、获取滚动的对象

var nice = $("#mydiv").getNiceScroll();
console.log一下就知道了

6、隐藏滚动条

用这个之前必须设置滚动的参数，下面的代码知识隐藏了滚动条而已。

$("#divs").getNiceScroll().hIDe();

7、检查滚动条调整大小（内容或位置发生变化时）

$("#mydiv").getNiceScroll().resize();
我试验了一下，这个需要放在你的触发器里面，每次触发内容的时候执行一次就可以，他是不会自己执行的。

8、滚动条位置设置

$("#divs").getNiceScroll(0).doScrollleft(x,duration); //X
$("#divs").getNiceScroll(0).doScrolltop(y,duration); //Y

下面就介绍一下API吧：

$("#divs").niceScroll({cursorcolor: "#424242",//光标颜色的十六进制cursoropacitymin: 0,//当光标处于非活动状态时更改不透明度，范围从1到0cursoropacitymax: 1,//当光标处于活动状态时改变不透明度（scrollabar“可见”状态），范围从1到0cursorwIDth: "5px",//滚动条宽度cursorborder: "1px solID #fff",//滚动条边框的CSS定义cursorborderradius: "5px",//滚动条的border-radiuszindex: "auto" | [number],//滚动条div的z-indexscrollspeed: 60,//滚动速度mousescrollstep: 40,//用鼠标滚轮滚动速度（像素）emulatetouch: false,//启用光标拖动滚动，就像桌面计算机中的触摸设备一样hwacceleration: true,//支持时使用硬件加速滚动Boxzoom: false,//为框内容启用缩放dblclickzoom: true,//（仅当Boxzoom = true时）双击框时激活缩放gesturezoom: true,//（仅当Boxzoom = true且带有触摸设备时）放大/放入框时激活缩放grabcursorenabled: true,//（仅当touchbehavior = true时）显示“抓取”图标autohIDemode: true,//true没有滚动时隐藏、"cursor"只隐藏光标、false不要隐藏、"leave"仅在指针离开内容时隐藏、"hIDden"总是隐藏、"scroll"仅在滚动时显示background: "#000",//滚动条背景轨道背景色iframeautoresize: true,//在加载事件上自动调整iframecursorminheight: 32,//设置最小滚动条高度preservenativescrolling: true,//您可以使用鼠标，冒泡鼠标滚轮事件滚动本机可滚动区域railoffset: false,//您可以为轨道位置添加偏移顶部/左侧bouncescroll: false,//（仅限hw accell）启用内容末尾的滚动d跳，类似于移动设备spacebarenabled: true,//按空格键时 启用向下滚动页面railpadding: { top: 0,right: 0,left: 0,bottom: 0 },//为轨道填充disableoutline: true,//对于Chrome浏览器，在使用nicescroll选择div时禁用大纲（橙色突出显示）horizrailenabled: true,//水平滚动railalign: right,//垂直轨道的对齐railvalign: bottom,//水平轨道的对齐enabletranslate3d: true,//使用CSS translate来滚动内容enablemousewheel: true,//鼠标滚轮事件enablekeyboard: true,//键盘事件smoothscroll: true,//轻松移动滚动sensitiverail: true,//点击轨道滚动enablemouselockAPI: true,//可以使用鼠标标题锁API（对象拖动时出现同样的问题）cursorfixedheight: false,//像素中的光标设置固定高度hIDecursordelay: 400,//设置延迟（以微秒为单位）淡出滚动条directionlockdeadzone: 6,//用于方向锁定激活的死区（以像素为单位）nativeparentscrolling: true,//检测内容的底部并让父卷轴滚动，就像本机滚动一样enablescrollonselection: true,//在选择文本时启用内容的自动滚动cursordragspeed: 0.3,//用光标拖动时的选择速度rtlmode: "auto",//水平div滚动从左侧开始cursordragontouch: false,//也可以在touch / touchbehavior模式下拖动光标oneaxismousemode: "auto",//允许水平滚动鼠标滚轮仅限水平内容，如果为false（仅垂直）鼠标滚轮不水平滚动，如果值为自动检测双轴鼠标scriptpath: "" //为Boxmode图标定义自定义路径preventmultitouchscrolling: true,//阻止在多点触控事件上滚动disablemutationobserver: false,//强制MutationObserver被禁用enableobserver: true,//启用DOM更改观察者，它尝试在父或内容div更改时调整大小/隐藏/显示scrollbarID: false //为nicescroll栏设置自定义ID });

总结

以上是内存溢出为你收集整理的滚动条美化插件jquery.nicescroll全部内容，希望文章能够帮你解决滚动条美化插件jquery.nicescroll所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。