####在這裡向大家推薦一款超級好用的滾動條插件，基于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/