您的位置：首页 > 其它

Nicescroll滚动条插件的用法

2017-08-02 10:32 162 查看

在这里向大家推荐一款超级好用的滚动条插件，基于jQuery的，谷歌，火狐，IE都支持，听

说还能兼容到IE6，太赞了，话不多说，先给个网址

https://nicescroll.areaaperta.com/demo/

然后是我的代码的showTime

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#d1{
width: 200px;
height:300px;
overflow: auto;
border:1px solid #ddd;
margin:100px auto;
padding:10px;
}
#d2,#d3{
height:1000px;
}
</style>
</head>
<body>
<div id = "d2">

</div>
<div id = "d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id = "d3">

</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$("#d1").niceScroll({
cursorcolor: "#75BCE1",
});
</script>
</body>
</html>

谷歌浏览器下的效果

火狐浏览器下的效果

为了突出是火狐刘浏览器，故意截得大了点

IE浏览器下的效果

没有圆角了，但是还是支持的，很不错，下面我将用代码的方式来介绍一下它的配置

重要的是这段代码

$("#d1").niceScroll({
cursorcolor: "#75BCE1",
});

初始化一个滚动条就可以了，但是要改滚动条的配置，就需要一些参数了

$("#d1").niceScroll({
cursorcolor: "#424242", // 改变滚动条颜色，使用16进制颜色值
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", // 滚动条的宽度，单位：便素
cursorborder: "1px solid #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, // (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标题 (类似对象拖动)
cursorfixedheight: false, // 修正光标的高度（像素）
hidecursordelay: 400, // 设置滚动条淡出的延迟时间（毫秒）
directionlockdeadzone: 6, // 设定死区，为激活方向锁定（像素）
nativeparentscrolling: true, // 检测内容底部便于让父级滚动
enablescrollonselection: true, // 当选择文本时激活内容自动滚动
cursordragspeed: 0.3, // 设置拖拽的速度
rtlmode: "auto", // DIV的水平滚动从左边开始
cursordragontouch: false, // 使用触屏模式来实现拖拽
oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
preventmultitouchscrolling: true // 防止多触点事件引发滚动
});

这个插件相当强大，我一用就深深被它吸引了，特别推荐哦，以后再也不用为了项目中要加滚动条而发愁了！

CDN网址

http://www.bootcdn.cn/jquery.nicescroll/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航