nicescroll 漂亮的自定義滾動條插件

GITHUB地址

https://github.com/inuyaksa/jquery.nicescroll

放在 jquery 腳本標記後並且要在調用方法之前

 <script src="jquery.nicescroll.js"></script>
例子

1.簡單模式,則該樣式文檔滾動條 (html 元素首選):
 $(document).ready( function() { $("html").niceScroll(); } );
2.與返回的對象的實例:
var nice = false; $(document).ready( function() { nice =
$("html").niceScroll(); } );
3.設置 DIV 的樣式和更改光標的顏色:
$(document).ready( function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"}); } );
4.與"包裝",形成由兩個 div DIV 第一種是 vieport,後者是內容:
$(document).ready( function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); } );
5.獲取 nicescroll 對象:
 var nice = $("#mydiv").getNiceScroll();
6.隱藏滾動條:
 $("#mydiv").getNiceScroll().hide();
7.滾動條大小調整 (當檢查內容或位置已更改):
 $("#mydiv").getNiceScroll().resize();
更多的功能請參閱DEMO頁面

配置參數

當調用“niceScroll”你可以傳遞一些參數來定製視覺方面:

cursorcolor - 十六進制改變光標顏色,默認值是“#000000”
cursoropacitymin - 改變不透明度非常光標處於非活動狀態(scrollabar“隱藏”狀態),範圍從1到0,
默認爲0(隱藏)
cursoropacitymax - 改變不透明度非常光標處於活動狀態(scrollabar“可見”狀態),範圍從1到0,默
認值是1(完全不透明)
cursorwidth - 像素光標的寬度,默認值爲5(你可以寫“加入5px”太)
cursorborder - 遊標邊框css定義,默認爲“1px的固體#FFF”
cursorborderradius - 以像素爲光標邊界半徑,默認爲​​“遞四方”
zIndex的 - 改變z-index值的滾動條的div,默認值是9999
scrollspeed - 滾動速度,默認值爲60
mousescrollstep - 高速滾動鼠標滾輪,默認值是40(像素)
touchbehavior - 使光標拖動滾動像在臺式電腦觸摸設備(默認:false)
hwacceleration - 使用硬件加速滾動支持的時候(默認:true)
boxzoom - 使變焦框中的內容(默認:false)
dblclickzoom - (僅當boxzoom = TRUE)變焦激活時,雙擊對話框(默認:true)
gesturezoom - (僅當boxzoom =真實,使用觸摸設備)上縮放框激活時,間距輸出/輸入(默認:true)
grabcursorenabled,顯示“搶”圖標的div touchbehavior = true時,(默認:true)
autohidemode,如何隱藏滾動條的作品,真=默認/“光標”=只進遊標隱藏/ false =不隱藏
背景,CSS改變軌道的背景下,默認爲“”
在加載事件iframeautoresize,AUTORESIZE的iframe(默認:true)
cursorminheight,設置在像素的最小光標高度(默認值:20)
preservenativescrolling,您可以滾動本機可滾動區域用鼠標,冒泡鼠標滾輪事件(默認:true)
railoffset,您可以添加抵消頂部/左邊的軌道位置(默認:false)
bouncescroll,使滾動彈跳在內容結尾作爲移動像(僅HW ACCELL)(默認:false)
spacebarenabled,使向下翻頁時,空格鍵已經按下滾動(默認:true)
railpadding,設置填充爲鐵路吧(默認值:{頂:0,右:0,左:0,下:0})
disableoutline,對於chrome瀏覽器,停用大綱(橙色hightlight)選擇具有nicescroll一個div(默認:
true)時,
horizrailenabled,nicescroll可以管理水平滾動(默認:true)
railalign,取向垂直導軌(defaul:“右”)
railvalign,對齊水平導軌(defaul:“底部”)
enabletranslate3d,nicescroll可以使用CSS轉換爲滾動內容(默認:true)
enablemousewheel,nicescroll可以管理的鼠標滾輪事件(默認:true)
enablekeyboard,nicescroll可以管理鍵盤事件(默認:true)
smoothscroll,滾動自如移動(默認:true)
sensitiverail,點擊軌道上進行滾動(默認:true)
enablemouselockapi,可以用鼠標說明鎖的API(對象拖動同樣的問題)(默認:true)
用於光標在像素cursorfixedheight,設置固定的高度(默認:false)
hidecursordelay,設置在微秒淡出滾動條的延遲時間(默認值:400)
在對方向鎖定激活像素directionlockdeadzone,死區(默認值:6)
nativeparentscrolling,檢測內容底部,並讓家長來滾動,作爲原生滾動做(默認:true)
enablescrollonselection,啓用自動滾動的內容時,選擇文本(默認:true)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章