jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）
有时为了保持页面风格的统一，我们需要修改滚动条的样式。虽然我们可以通过
CSS 设置滚动条各部分的颜色样式，但这种方式不支持老版本的浏览器。而且不同的浏览器下，
CSS 滚动条属性的写法也不一样，如果各个浏览器都需要兼容（特别是移动设备的浏览器），那就十分麻烦了。
这里推荐一个十分好用的滚动条插件：
Nicescroll
一、NiceScroll 介绍
NiceScroll 是一款完全基于
jQuery 框架的滚动条插件，它不仅有着类似
iOS 系统设备的滚动条外观，而且还支持任意的
<div>、
<iframe>、
<body> 元素的滚动效果。
1，GitHub 主页
2，功能特点
- 不需要增加额外的 CSS。
- 几乎全浏览器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera
- 实现只需要一段代码，侵入性非常小。
- 样式可完全自定义。
- 支持触摸事件，可在触摸屏上使用。
3，配置说明
（1）页面中引入 jquery.js（2）页面中引入 jquery.nicescroll.js
（3）如果需要用到全屏放大功能的话，还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。
二、基本用法
1，最简单的用法
（1）我们只需在页面初始化完毕后，对需要使用这个滚动条插件的元素调用
niceScroll() 方法即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"js/jquery-3.1.1.js"
charset=
"utf-8"
></script>
<script src=
"js/jquery.nicescroll.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
"html"
).niceScroll();
}
);
</script>
</head>
<style>
li {
height: 50px;
}
</style>
<body>
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
<li>条目4</li>
<li>条目5</li>
</ul>
</body>
</html>
|
（2）这里我直接是让整个页面使用 NiceScroll 插件，默认情况下滚动条是自动隐藏的，即内容如果超出窗口时滚动条也不会显示。（当然此时通过鼠标滚轮还是可以滚动页面的）
（3）当鼠标移到窗口右侧时，滚动条则会显示出来。我们可以拖动它进行页面滚动。
2，返回滚动条对象
|
1
2
3
4
|
var
nice =
false
;
$(
function
() {
nice = $(
"body"
).niceScroll();
});
|
3，使用容器“wrapper”包含DIV
这种方式由两个
DIV 组成，前一个为
vieport，后一个为里面内容。
（2）效果图
|
1
|
$(
"#viewportdiv"
).niceScroll(
"#wrapperdiv"
,{cursorcolor:
"#00F"
});
|
如果遇到加载数据的时候
nicescroll 滚动条闪烁，还有对绝对定位的元素（例如下拉框）使用滚动条，特别是在需要滚动条比较多的页面，导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置，比如：
$("#viewportdiv").niceScroll("#wrapperdiv",{
'cursorcolor':'#686868',
'cursorborder':'none',
'smoothscroll': 'false',
'autohidemode':false
});
$("#viewportdiv").niceScroll("#wrapperdiv",{
'cursorcolor':'#686868',
'cursorborder':'none',
'smoothscroll': 'false',
'autohidemode':false
});
4，隐藏滚动条
注意：这个只是把滚动条隐藏，使用鼠标滚轮仍然可以进行滚动。|
1
|
$(
"#div1"
).getNiceScroll().hide();
|
5，重置滚动条大小
|
1
|
$(
"#div1"
).getNiceScroll().resize();
|
6，滚动到某个指定位置
|
1
2
3
4
5
|
//水平方向滚动（距左侧100px）
$(
"#div1"
).getNiceScroll(0).doScrollLeft(100);
//垂直方向滚动（距上方100px）
$(
"#div1"
).getNiceScroll(0).doScrollTop(100);
|
三、常用配置参数
在调用 niceScroll() 方法初始化滚动条时，我们可以传入一些参数属性，从而对滚动条的样式以及行为进行修改。1，简单的样式修改
（1）这里我们对滚动条的颜色和触摸滚动模式进行的修改。
|
1
2
3
4
5
6
7
8
|
$(
"#div1"
).niceScroll({
touchbehavior:
true
,
//是否是触摸式滚动效果
cursorcolor:
"#333"
,
//滚动条的颜色值
cursoropacitymax:0.6,
//滚动条的透明度值
cursorwidth:20,
//滚动条的宽度值
background:
"#00F"
,
//滚动条的背景色，默认是透明的
autohidemode:
true
,
//滚动条是否是自动隐藏，默认值为 true
});
|
（2）效果图
2，全屏放大显示
（1）要开启全屏放大功能，只需把
boxzoom 参数设置为
true。（同时记得把
zoomico.png 放到与
jquery.nicescroll.js 同一个文件夹下）
（2）当我们将鼠标移到滚动区域右侧时，在滚动条旁边会显示出一个“ 放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
|
1
2
3
|
$(
"#div1"
).niceScroll({
boxzoom:
true
//显示放大镜标按钮，(默认为false)
});
|
（2）当我们将鼠标移到滚动区域右侧时，在滚动条旁边会显示出一个“ 放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
（3）而当这个区域放大后，右上角的这个图标又会变成“
缩小”图标，点击后该区域则又还原回原来的位置和尺寸。
3，完整的配置参数表
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
$(
"#div1"
).niceScroll({
cursorcolor:
"#424242"
,
// 改变滚动条颜色，使用16进制颜色值
cursoropacitymin: 0,
// 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1,
// 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth:
"5px"
,
// 滚动条的宽度，单位：便素
cursorborder:
"1px solid #fff"
,
// CSS方式定义滚动条边框
cursorborderradius:
"5px"
,
// 滚动条圆角（像素）
zindex:
"auto"
,
// 改变滚动条的DIV的z-index值（auto或数字）
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
// 防止多触点事件引发滚动
});
|
扫一扫
8359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
