jQuery.nicescroll美化滾動條

HTML

首先我們在#content加入一定高度的内容。一定要出現滾動條，不然看不到效果。

<div id="content"> 
    <h2>我們的特色</h2> 
    <p>1、軟體+人工精心仿制。3個工作日内完成仿制</p> 
    <p>2、檔案歸類。圖檔放在images檔案夾，樣式css，特效js，字型fonts</p> 
    <p>3、個人中心、需要登入等頁面也可仿制</p> 
    <p>4、html完美格式化。</p> 
    ...... 
</div>
           

接着我們引入jQuery庫和nicescroll插件：

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
           

jQuery

調用niceScroll 滾動條插件非常簡單：

$('#content').niceScroll({ 
    cursorcolor: "#ccc",//#CC0071 光标顔色 
    cursoropacitymax: 1, //改變不透明度非常光标處于活動狀态（scrollabar“可見”狀态），範圍從1到0 
    touchbehavior: false, //使光标拖動滾動像在台式電腦觸摸裝置 
    cursorwidth: "5px", //像素光标的寬度 
    cursorborder: "0", //     遊标邊框css定義 
    cursorborderradius: "5px",//以像素為光标邊界半徑 
    autohidemode: false //是否隐藏滾動條 
});
           

頁面滾動條

body{height:3000px}
           

$('body').niceScroll({ 
    cursorcolor: "#ccc",//#CC0071 光标顔色 
    cursoropacitymax: 1, //改變不透明度非常光标處于活動狀态（scrollabar“可見”狀态），範圍從1到0 
    touchbehavior: false, //使光标拖動滾動像在台式電腦觸摸裝置 
    cursorwidth: "5px", //像素光标的寬度 
    cursorborder: "0", //     遊标邊框css定義 
    cursorborderradius: "5px",//以像素為光标邊界半徑 
    autohidemode: false //是否隐藏滾動條 
});
           

參數	描述	預設值
cursorcolor	光标顔色	＃000000
cursoropacitymin	改變不透明度非常光标處于非活動狀态（scrollabar“隐藏”狀态），範圍從1到0	0 隐藏
cursoropacitymax	改變不透明度非常光标處于活動狀态（scrollabar“可見”狀态），範圍從1到0	1 完全不透明
cursorwidth	像素光标的寬度	5
cursorborder	遊标邊框css定義	1px solid ＃FFF
cursorborderradius	以像素為光标邊界半徑	-
zIndex	改變z-index值的滾動條的div	9999
scrollspeed	滾動速度	60
mousescrollstep	高速滾動滑鼠滾輪	40
touchbehavior	使光标拖動滾動像在台式電腦觸摸裝置	false
hwacceleration	使用硬體加速滾動支援的時候	true
boxzoom	使變焦框中的内容	false
dblclickzoom	（僅當boxzoom = TRUE）變焦激活時，輕按兩下對話框	true
gesturezoom	（僅當boxzoom =真實，使用觸摸裝置）上縮放框激活時，間距輸出/輸入	true
autohidemode	是否隐藏滾動條	true
horizrailenabled	nicescroll可以管理水準滾動	true
railalign	取向垂直導軌	右
railvalign	對齊水準導軌	底部
enablekeyboard	nicescroll可以管理鍵盤事件	true
smoothscroll	滾動自如移動	true