Nicescroll滾動條插件是一個非常強大的基于JQUERY的滾動條插件，不需要增加額外的css，幾乎全浏覽器相容。ie6+，實作隻需要一段代碼，侵入性非常小，樣式可完全自定義，支援觸摸事件，可在觸摸屏上使用。
效果圖：
//基礎用法
$(document).ready(
function() {
$("html").niceScroll();
}
);
注意：一定要放在 $(document).ready 中進行初始化！
隐藏滾動條：（當在同一頁面中使用多個nicescroll插件時，要及時隐藏用完的nicescroll對象，加載時，需要先show,再resize。）
檢測滾動條是否重置大小（當視窗改變大小時）：
滾動到某個位置：
$("#mydiv").getNiceScroll().doScrollLeft(x, duration); // Scroll X Axis；第一個參數為滾動的位置，第二個為滾動需要的時間
$("#mydiv").getNiceScroll().doScrollTop(y, duration); // Scroll Y Axis
設定各種參數：
$("#thisdiv").niceScroll({
cursorcolor: "#424242", // 改變滾動條顔色，使用16進制顔色值
cursoropacitymin: , // 當滾動條是隐藏狀态時改變透明度, 值範圍 1 到 0
cursoropacitymax: , // 當滾動條是顯示狀态時改變透明度, 值範圍 1 到 0
cursorwidth: "5px", // 滾動條的寬度，機關：便素
cursorborder: "1px solid #fff", // CSS方式定義滾動條邊框
cursorborderradius: "5px", // 滾動條圓角（像素）
zindex: "auto" | <number>, // 改變滾動條的DIV的z-index值
scrollspeed: , // 滾動速度
mousescrollstep: , // 滑鼠滾輪的滾動速度 (像素)
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: , // 設定滾動條的最小高度 (像素)
preservenativescrolling: true, // 你可以用滑鼠滾動可滾動區域的滾動條和增加滑鼠滾輪事件
railoffset: false, // 可以使用top/left來修正位置
bouncescroll: false, // (only hw accell) 啟用滾動跳躍的内容移動
spacebarenabled: true, // 當按下空格時使頁面向下滾動
railpadding: { top: , right: , left: , bottom: }, // 設定軌道的内間距
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: , // 設定滾動條淡出的延遲時間（毫秒）
directionlockdeadzone: , // 設定死區，為激活方向鎖定（像素）
nativeparentscrolling: true, // 檢測内容底部便于讓父級滾動
enablescrollonselection: true, // 當選擇文本時激活内容自動滾動
cursordragspeed: , // 設定拖拽的速度
rtlmode: "auto", // DIV的水準滾動從左邊開始
cursordragontouch: false, // 使用觸屏模式來實作拖拽
oneaxismousemode: "auto", // 當隻有水準滾動時可以用滑鼠滾輪來滾動，如果設為false則不支援水準滾動，如果設為auto支援雙軸滾動
scriptpath: "" // 為boxmode圖檔自定義路徑 ("" => same script path)
preventmultitouchscrolling: true // 防止多觸點事件引發滾動
});
當插件放在具有absolute浮動的容器中，并設定了top值時，插件的top會出現問題，解決方法使用插件的railoffset屬性：
railoffset, you can add offset top/left for rail position (default:false)
加載資料的時候nicescroll滾動條閃爍，還有對絕對定位的元素（例如下拉框）使用滾動條，特别是在需要滾動條比較多的頁面，導緻位置錯亂，這些問題需要對設定滾動條的元素的直接子元素設定,官方給出的答案是：
$('#addContent_scroll_wrap').niceScroll('#sumStackColumn',{'cursorcolor':'#686868','cursorborder':'none','smoothscroll': 'false','autohidemode':false});
但是之後仍然發現一個問題，在頁面比較複雜的情況下，可能會出現，下拉框出來了，但是滾動條沒出來，官方給出的說法是：當在同一頁面中使用多個nicescroll插件時，要及時隐藏用完的nicescroll對象，加載時，需要先show,再resize。
是以采用resize()的方法，重置了滾動條，但是一定要注意，這裡選擇滾動條的對象，一定不能選錯，否則也是無效的：
$('#addContent_scroll_wrap').getNiceScroll().show();
$('#addContent_scroll_wrap').getNiceScroll().resize();
示例代碼
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.js"></script>
<script src="jquery.nicescroll.js"></script>
</head>
<body>
<div id="div1" style="width:100%;height:600px;overflow:auto;">
<h1>這裡是滾動條插件niceScroll的測試頁面</h1>
<h2>這裡是滾動條插件niceScroll的測試頁面</h2>
<h3>這裡是滾動條插件niceScroll的測試頁面</h3>
<h4>這裡是滾動條插件niceScroll的測試頁面</h4>
<h5>這裡是滾動條插件niceScroll的測試頁面</h5>
<h6>這裡是滾動條插件niceScroll的測試頁面</h6>
<p>這裡是滾動條插件niceScroll的測試頁面</p>
<span>這裡是滾動條插件niceScroll的測試頁面</span>
<h1>下面是帶有滾動條的子div</h1>
<div id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">
<div id="warp">
<h1>我是帶有滾動條的子div</h1>
<h2>我是帶有滾動條的子div</h2>
<h3>我是帶有滾動條的子div</h3>
<h4>我是帶有滾動條的子div</h4>
<h5>我是帶有滾動條的子div</h5>
<h6>我是帶有滾動條的子div</h6>
</div>
</div>
<h1>這裡是滾動條插件niceScroll的測試頁面</h1>
<h2>這裡是滾動條插件niceScroll的測試頁面</h2>
<h3>這裡是滾動條插件niceScroll的測試頁面</h3>
<h4>這裡是滾動條插件niceScroll的測試頁面</h4>
<h5>這裡是滾動條插件niceScroll的測試頁面</h5>
<h6>這裡是滾動條插件niceScroll的測試頁面</h6>
</div>
</body>
<script>
$(function () {
$("#div1").niceScroll({
cursorborder: "",
cursorcolor: "#00F",
boxzoom: false,
autohidemode: false
});
$("#div2").niceScroll('#warp', {
cursorborder: "",
cursorcolor: "#00F",
boxzoom: false,
autohidemode: false
});
});
</script>
</html>
位址：http://www.cnblogs.com/jinqi79731/p/nicescroll.html
官網：https://nicescroll.areaaperta.com/how-to-use/
![js常用插件(四)之jsonExportExcel導出表格(背景系統必備)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)