有时为了保持页面风格的统一，我们需要修改滚动条的样式。虽然我们可以通过CSS设置滚动条各部分的颜色样式，但这种方式不支持老版本的浏览器。而且不同的浏览器下，CSS滚动条属性的写法也不一样，如果各个浏览器都需要兼容（特别是移动设备的浏览器），那就十分麻烦了。
这里推荐一个十分好用的滚动条插件：Nicescroll
一、NiceScroll 介绍
NiceScroll是一款完全基于jQuery框架的滚动条插件，它不仅有着类似iOS系统设备的滚动条外观，而且还支持任意的<div>、<iframe>、<body>元素的滚动效果。
1，GitHub 主页
/inuyaksa/jquery.nicescroll2，功能特点
不需要增加额外的CSS。几乎全浏览器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera实现只需要一段代码，侵入性非常小。样式可完全自定义。支持触摸事件，可在触摸屏上使用。3，配置说明
（1）页面中引入jquery.js
（2）页面中引入jquery.nicescroll.js
（3）如果需要用到全屏放大功能的话，还要把zoomico.png复制到与jquery.nicescroll.js同一个文件夹下。
二、基本用法
1，最简单的用法
（1）我们只需在页面初始化完毕后，对需要使用这个滚动条插件的元素调用niceScroll()方法即可。
（2）这里我直接是让整个页面使用NiceScroll插件，默认情况下滚动条是自动隐藏的，即内容如果超出窗口时滚动条也不会显示。（当然此时通过鼠标滚轮还是可以滚动页面的）
（3）当鼠标移到窗口右侧时，滚动条则会显示出来。我们可以拖动它进行页面滚动。
2，返回滚动条对象
3，使用容器“wrapper”包含DIV
这种方式由两个DIV组成，前一个为vieport，后一个为里面内容。
如果遇到加载数据的时候nicescroll滚动条闪烁，还有对绝对定位的元素（例如下拉框）使用滚动条，特别是在需要滚动条比较多的页面，导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置，比如：
$("#viewportdiv").niceScroll("#wrapperdiv",{
'cursorcolor':'#686868',
'cursorborder':'none',
'smoothscroll': 'false',
'autohidemode':false
});
4，隐藏滚动条
注意：这个只是把滚动条隐藏，使用鼠标滚轮仍然可以进行滚动。
5，重置滚动条大小
6，滚动到某个指定位置
7，删除滚动条
三、常用配置参数
在调用niceScroll()方法初始化滚动条时，我们可以传入一些参数属性，从而对滚动条的样式以及行为进行修改。
1，简单的样式修改
（1）这里我们对滚动条的颜色和触摸滚动模式进行的修改。
（2）效果图
2，全屏放大显示
（1）要开启全屏放大功能，只需把boxzoom参数设置为true。（同时记得把zoomico.png放到与jquery.nicescroll.js同一个文件夹下）
（2）当我们将鼠标移到滚动区域右侧时，在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
（3）而当这个区域放大后，右上角的这个图标又会变成“缩小”图标，点击后该区域则又还原回原来的位置和尺寸。
3，完整的配置参数表
原文出自：转载请保留原文链接：/blog/cache/detail_1931.html
如果觉得《jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）》对你有帮助，请点赞、收藏，并留下你的观点哦！
