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() 方法即可。
<!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,返回滚动条对象
var nice = false; $(function() { nice = $("body").niceScroll(); });
3,使用容器“wrapper”包含DIV
这种方式由两个 DIV 组成,前一个为 vieport,后一个为里面内容。
(2)效果图
$("#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,隐藏滚动条
注意:这个只是把滚动条隐藏,使用鼠标滚轮仍然可以进行滚动。$("#div1").getNiceScroll().hide();
5,重置滚动条大小
$("#div1").getNiceScroll().resize();
6,滚动到某个指定位置
//水平方向滚动(距左侧100px) $("#div1").getNiceScroll(0).doScrollLeft(100); //垂直方向滚动(距上方100px) $("#div1").getNiceScroll(0).doScrollTop(100);
三、常用配置参数
在调用 niceScroll() 方法初始化滚动条时,我们可以传入一些参数属性,从而对滚动条的样式以及行为进行修改。1,简单的样式修改
(1)这里我们对滚动条的颜色和触摸滚动模式进行的修改。
$("#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)当我们将鼠标移到滚动区域右侧时,在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
$("#div1").niceScroll({ boxzoom: true //显示放大镜标按钮,(默认为false) });
(2)当我们将鼠标移到滚动区域右侧时,在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。

(3)而当这个区域放大后,右上角的这个图标又会变成“缩小”图标,点击后该区域则又还原回原来的位置和尺寸。

3,完整的配置参数表
$("#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 // 防止多触点事件引发滚动 });