有时为了保持页面风格的统一，我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式，但这种方式不支持老版本的浏览器。而且不同的浏览器下，CSS 滚动条属性的写法也不一样，如果各个浏览器都需要兼容（特别是移动设备的浏览器），那就十分麻烦了。
这里推荐一个十分好用的滚动条插件： Nicescroll
NiceScroll 是一款完全基于 jQuery 框架的滚动条插件，它不仅有着类似 iOS 系统设备的滚动条外观，而且还支持任意的 <div>、<iframe>、<body>元素的滚动效果。
https://github.com/inuyaksa/jquery.nicescroll
（1）页面中引入 jquery.js
（2）页面中引入 jquery.nicescroll.js
（3）如果需要用到全屏放大功能的话，还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。
（1）我们只需在页面初始化完毕后，对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。
（2）这里我直接是让整个页面使用 NiceScroll 插件，默认情况下滚动条是自动隐藏的，即内容如果超出窗口时滚动条也不会显示。（当然此时通过鼠标滚轮还是可以滚动页面的）
（3）当鼠标移到窗口右侧时，滚动条则会显示出来。我们可以拖动它进行页面滚动。
这种方式由两个 DIV 组成，前一个为 vieport，后一个为里面内容。
如果遇到加载数据的时候 nicescroll 滚动条闪烁，还有对绝对定位的元素（例如下拉框）使用滚动条，特别是在需要滚动条比较多的页面，导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置，比如：
注意：这个只是把滚动条隐藏，使用鼠标滚轮仍然可以进行滚动。
//水平方向滚动（距左侧100px）
//垂直方向滚动（距上方100px）
三、常用配置参数
在调用 niceScroll() 方法初始化滚动条时，我们可以传入一些参数属性，从而对滚动条的样式以及行为进行修改。
（1）这里我们对滚动条的颜色和触摸滚动模式进行的修改。
（2）效果图
（1）要开启全屏放大功能，只需把 boxzoom 参数设置为 true。（同时记得把 zoomico.png 放到与 jquery.nicescroll.js 同一个文件夹下）
（2）当我们将鼠标移到滚动区域右侧时，在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。
（3）而当这个区域放大后，右上角的这个图标又会变成“缩小”图标，点击后该区域则又还原回原来的位置和尺寸。
(摘自博客园，原网址http://www.cnblogs.com/reweb/p/3268775.html)
jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。
页面使用：
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll详细参数配置：
cursorcolor - 设置滚动条颜色，默认值是“＃000000”
cursoropacitymin - 滚动条透明度最小值
cursoropacitymax - 滚动条透明度最大值
cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）
cursorborder - CSS定义边框，默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆角
ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999
scrollspeed - 滚动速度，默认值是60
mousescrollstep - 滚动鼠标滚轮的速度，默认值是40（像素）
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使用硬件加速滚动支持时，默认为true
boxzoom - 使变焦框的内容，默认为false
dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true
gesturezoom - boxzoom = true并使用触摸设备）变焦（仅当激活时，间距/盒，默认为true
grabcursorenabled“抢”图标，显示div的touchbehavior = true时，默认值是true
autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
的背景下，改变铁路背景的CSS，默认值为“”
iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）
cursorminheight，设置最低滚动条高度（默认值：20）
preservenativescrolling，您可以用鼠标滚动本地滚动的区域，鼓泡鼠标滚轮事件（默认：true）
railoffset，您可以添加抵消顶部/左轨位置（默认：false）
bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）
spacebarenabled，允许使用空格键滚动（默认：true）
railpadding，设置间距（默认：顶：0，右：0，左：0，底部：0}）
disableoutline，Chrome浏览器，禁用纲要（橙色hightlight）时，选择一个div nicescroll（默认：true）
请使用
fullPage.js插件。可以自行百度一下。
参考代码：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
color: #FFFFFF
}
.section1 {
background-color: #BFDA00
}
.section2 {
background-color: #2EBE21
}
.section3 {
background-color: #2C3E50
}
</style>
<title></title>
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script>
$(function() {
$("#ido").fullpage()
})
</script>
</head>
<body>
<div id="ido">
<div class="section section1">
<h1>每一个section是一屏，这是第一屏</h3>
</div>
<div class="section section2">
<h1>每一个section是一屏，这是第二屏</h3>
</div>
<div class="section section3 active">
<h1>每一个section是一屏，这是第三屏</h3>
</div>
<div class="section section4">
<h1>每一个section是一屏，这是第四屏</h3>
</div>
</div>
</body>
</html>
css js 自己引用啊
