jquery.nicescroll.min.js滾動條使用方法

jquery.nicescroll.min.js滾動條使用方法,Nicescroll 是製做自定義滾動條的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit內核瀏覽器(chrome,safari)以及智能終端設備瀏覽器的滾動條。

頁面使用：

$("html").niceScroll({ 
cursorcolor:"#E62020", 
cursoropacitymax:1, 
touchbehavior:false, 
cursorwidth:"10px", 
cursorborder:"0", 
cursorborderradius:"5px"

})

nicescroll詳細參數配置：

cursorcolor - 設置滾動條顏色，默認值是「＃000000」
cursoropacitymin - 滾動條透明度最小值
cursoropacitymax - 滾動條透明度最大值
cursorwidth - 滾動條的寬度像素，默認爲5（你能夠寫「5PX」）
cursorborder - CSS定義邊框，默認爲「1px solid #FFF」
cursorborderradius - 滾動條的邊框圓角
ZIndex的 - 改變滾動條的DIV的z-index值，默認值是9999
scrollspeed - 滾動速度，默認值是60
mousescrollstep - 滾動鼠標滾輪的速度，默認值是40（像素）
touchbehavior - 讓滾動條能拖動滾動觸摸設備默認爲false
hwacceleration - 使用硬件加速滾動支持時，默認爲true
boxzoom - 使變焦框的內容，默認爲false
dblclickzoom - （僅當boxzoom = TRUE）變焦啓動時，雙點擊框，默認爲true
gesturezoom - boxzoom = true並使用觸摸設備）變焦（僅當激活時，間距/盒，默認爲true
grabcursorenabled「搶」圖標，顯示div的touchbehavior = true時，默認值是true
autohidemode，如何隱藏滾動條的做品，真正的默認/「光標」=只光標隱藏/ FALSE =不隱藏
的背景下，改變鐵路背景的CSS，默認值爲「」
iframeautoresize中，AUTORESIZE iframe上的load事件（默認：true）
cursorminheight，設置最低滾動條高度（默認值：20）
preservenativescrolling，您能夠用鼠標滾動本地滾動的區域，鼓泡鼠標滾輪事件（默認：true）
railoffset，您能夠添加抵消頂部/左軌位置（默認：false）
bouncescroll，使滾動反彈結束時的內容移動（僅硬件ACCELL）（默認：FALSE）
spacebarenabled，容許使用空格鍵滾動（默認：true）
railpadding，設置間距（默認：頂：0，右：0，左：0，底部：0}）
disableoutline，Chrome瀏覽器，禁用綱要（橙色hightlight）時，選擇一個div nicescroll（默認：true）

 

 

 

官方參數說明：

cursorcolor - change cursor color in hex, default is "#000000"

 

. cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)

 

. cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)

 

. cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)

 

. cursorborder - css definition for cursor border, default is "1px solid #fff"

 

. cursorborderradius - border radius in pixel for cursor, default is "4px"

 

. zindex - change z-index for scrollbar div, default value is 9999

 

. scrollspeed - scrolling speed, default value is 60

 

. mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)

 

. touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false

 

. hwacceleration - use hardware accelerated scroll when supported, default is true

 

. boxzoom - enable zoom for box content, default is false

 

. dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true

 

. gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box, default is true

 

. grabcursorenabled, display "grab" icon for div with touchbehavior = true, default is true

 

. autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide

 

. background, change css for rail background, default is ""

 

. iframeautoresize, autoresize iframe on load event (default:true)

 

. cursorminheight, set the minimum cursor height in pixel (default:20)

 

. preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)

 

. railoffset, you can add offset top/left for rail position (default:false)

 

. bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)

 

. spacebarenabled, enable page down scrolling when space bar has pressed (default:true)

 

. railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})

 

. disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)

 

. horizrailenabled, nicescroll can manage horizontal scroll (default:true)

 

. railalign, alignment of vertical rail (defaul:"right")

 

. railvalign, alignment of horizontal rail (defaul:"bottom")

 

. enabletranslate3d, nicescroll can use css translate to scroll content (default:true)

 

. enablemousewheel, nicescroll can manage mouse wheel events (default:true)

 

. enablekeyboard, nicescroll can manage keyboard events (default:true)

 

. smoothscroll, scroll with ease movement (default:true)

 

. sensitiverail, click on rail make a scroll (default:true)

 

. enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)

 

. cursorfixedheight, set fixed height for cursor in pixel (default:false)

 

 

頁面使用：

<!--<script type="text/javascript">

$(document).ready(function(){

    $(".content_box").niceScroll();

　　//$("html").niceScroll();

});

</script>-->

content_box爲滾動內容容器

 

只需以上兩步便可使用，無需css等。

下載地址：jquery.nicescroll.min.js點擊下載

http://areaaperta.com/nicescroll/  官網

本文由紅蜘蛛網絡聯盟（www.rswebun.com)整理編輯。