jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）
? ? 有時為了保持頁面風格的統一，我們需要修改滾動條的樣式。雖然我們可以通過?CSS?設置滾動條各部分的顏色樣式，但這種方式不支持老版本的瀏覽器。而且不同的瀏覽器下，CSS?滾動條屬性的寫法也不一樣，如果各個瀏覽器都需要兼容（特別是移動設備的瀏覽器），那就十分麻煩了。
? ? 這里推薦一個十分好用的滾動條插件：Nicescroll
一、NiceScroll 介紹
NiceScroll?是一款完全基于?jQuery?框架的滾動條插件，它不僅有著類似?iOS?系統設備的滾動條外觀，而且還支持任意的?<div>、<iframe>、<body>?元素的滾動效果。
?
1，GitHub 主頁
- https://github.com/inuyaksa/jquery.nicescroll
?
2，功能特點
- 不需要增加額外的?CSS。
- 幾乎全瀏覽器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera
- 實現只需要一段代碼，侵入性非常小。
- 樣式可完全自定義。
- 支持觸摸事件，可在觸摸屏上使用。
?
3，配置說明
（1）頁面中引入?jquery.js
（2）頁面中引入?jquery.nicescroll.js
（3）如果需要用到全屏放大功能的話，還要把?zoomico.png?復制到與?jquery.nicescroll.js?同一個文件夾下。
?
二、基本用法
1，最簡單的用法
（1）我們只需在頁面初始化完畢后，對需要使用這個滾動條插件的元素調用?niceScroll()?方法即可。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> ??<head> ????<meta charset="utf-8"> ????<title></title> ????<script src="js/jquery-3.1.1.js"?charset="utf-8"></script> ????<script src="js/jquery.nicescroll.js"?charset="utf-8"></script> ????<script type="text/javascript"> ??????$(document).ready( ????????function() { ??????????$("html").niceScroll(); ????????} ??????); ????</script> ??</head> ??<style> ????li { ??????height: 50px; ????} ??</style> ??<body> ????<ul> ??????<li>條目1</li> ??????<li>條目2</li> ??????<li>條目3</li> ??????<li>條目4</li> ??????<li>條目5</li> ????</ul> ??</body> </html> |
（2）這里我直接是讓整個頁面使用?NiceScroll?插件，默認情況下滾動條是自動隱藏的，即內容如果超出窗口時滾動條也不會顯示。（當然此時通過鼠標滾輪還是可以滾動頁面的）
?
（3）當鼠標移到窗口右側時，滾動條則會顯示出來。我們可以拖動它進行頁面滾動。
?
2，返回滾動條對象
| 1 2 3 4 | var?nice =?false; $(function() {? ????nice = $("body").niceScroll(); }); |
?
3，使用容器“wrapper”包含DIV
這種方式由兩個?DIV?組成，前一個為?vieport，后一個為里面內容。
| 1 | $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); |
如果遇到加載數據的時候?nicescroll?滾動條閃爍，還有對絕對定位的元素（例如下拉框）使用滾動條，特別是在需要滾動條比較多的頁面，導致位置錯亂的等問題。那么需要使用這個方法對設置滾動條的元素的直接子元素進行設置，比如：
? ??$("#viewportdiv").niceScroll("#wrapperdiv",{
? ? ? ? ? ? 'cursorcolor':'#686868',
? ? ? ? ? ? 'cursorborder':'none',
? ? ? ? ? ? 'smoothscroll': 'false',
? ? ? ? ? ? 'autohidemode':false
? ? });
?
4，隱藏滾動條
注意：這個只是把滾動條隱藏，使用鼠標滾輪仍然可以進行滾動。
| 1 | $("#div1").getNiceScroll().hide(); |
?
5，重置滾動條大小
| 1 | $("#div1").getNiceScroll().resize(); |
?
6，滾動到某個指定位置
| 1 2 3 4 5 | //水平方向滾動（距左側100px） $("#div1").getNiceScroll(0).doScrollLeft(100); ? //垂直方向滾動（距上方100px） $("#div1").getNiceScroll(0).doScrollTop(100); |
7，刪除滾動條
| 1 | $("#div1").getNiceScroll().remove(); ? ? $("#div1").niceScroll({ ? ? ? ?cursorborder:"",//不需要border ? ? ? ?cursorcolor:"#C1C1C1",//滾動條顏色 ? ? ? ?boxzoom:false,//禁止放大box的內容 ? ? ? ?autohidemode:false,//禁止隱藏 ? ? ? ?horizrailenabled:false //水平方向禁用 }); |
三、常用配置參數
在調用?niceScroll()?方法初始化滾動條時，我們可以傳入一些參數屬性，從而對滾動條的樣式以及行為進行修改。
?
1，簡單的樣式修改
（1）這里我們對滾動條的顏色和觸摸滾動模式進行的修改。
| 1 2 3 4 5 6 7 8 | $("#div1").niceScroll({ ????touchbehavior:true,?????//是否是觸摸式滾動效果 ????cursorcolor:"#333",?????//滾動條的顏色值 ????cursoropacitymax:0.6,???//滾動條的透明度值 ????cursorwidth:20,?????????//滾動條的寬度值 ????background:"#00F",??//滾動條的背景色，默認是透明的 ????autohidemode:true,??????//滾動條是否是自動隱藏，默認值為 true }); |
（2）效果圖
?
2，全屏放大顯示
（1）要開啟全屏放大功能，只需把?boxzoom?參數設置為?true。（同時記得把?zoomico.png?放到與?jquery.nicescroll.js?同一個文件夾下）
| 1 2 3 | $("#div1").niceScroll({ ????boxzoom:?true??//顯示放大鏡標按鈕，(默認為false) }); |
（2）當我們將鼠標移到滾動區域右側時，在滾動條旁邊會顯示出一個“放大”圖標。點擊后該區域會自動放大占滿整個瀏覽器窗口。
?
（3）而當這個區域放大后，右上角的這個圖標又會變成“縮小”圖標，點擊后該區域則又還原回原來的位置和尺寸。
?
3，完整的配置參數表
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | $("#div1").niceScroll({ ????????cursorcolor:?"#424242",?// 改變滾動條顏色，使用16進制顏色值 ????????cursoropacitymin: 0,?// 當滾動條是隱藏狀態時改變透明度, 值范圍 1 到 0 ????????cursoropacitymax: 1,?// 當滾動條是顯示狀態時改變透明度, 值范圍 1 到 0 ????????cursorwidth:?"5px",?// 滾動條的寬度，單位：便素 ????????cursorborder:?"1px solid #fff",?// CSS方式定義滾動條邊框 ????????cursorborderradius:?"5px",?// 滾動條圓角（像素） ????????zindex:?"auto",?// 改變滾動條的DIV的z-index值（auto或數字） ????????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?// 防止多觸點事件引發滾動 ????}); |
原文出自：www.hangge.com??轉載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1931.html
轉載于：http://www.hangge.com/blog/cache/detail_1931.html
總結
以上是生活随笔為你收集整理的jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在页面最上面显示当前登陆的状态
- 下一篇： solaris11-text-安装GUI