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)整理编辑。