插件五之滾動條jquery.slimscroll.js

前言

slimscroll.js用於模擬傳統的瀏覽器滾動條(豎向),原理為原內容內置於一個僅可視區域顯示層,使用2個div層用於模擬滾動條和滾動條背景軌道監聽滾動條div高度變化來控制內容層位置(猜測),可自定義滾動條顏色,其軌跡(背景顏色),寬度,位置,滾動閥值,與容器的padding值等~使用中依賴於jquery庫.

<script type="text/javascript" src="qingyu/js/jquery.min.js"></script>
<script type="text/javascript" src="qingyu/js/jquery.slimscroll.min.js"></script>

實例化參數說明

$('.qingyu').slimScroll({width:'100px'})


width:'100px',//容器寬度,默認無
height:'100px',//容器高度,默認250px
size:'10px',//滾動條寬度,默認7px
position:'left',//滾動條位置,可選值:left,right,默認right
color:'#abc',//滾動條顏色,默認#000000
alwaysVisible:true,//是否禁用隱藏滾動條,默認false
distance:'10px,'//距離邊框距離,位置由position參數決定,默認1px
start:'.p',//滾動條初始位置,可選值top,bottom,$(selector)--內容元素位置,默認top
wheelStep:'12px',滾動條滾動值,默認10px
railVisible:true,//滾動條背景軌跡,默認false
railColor:'#005612',//滾動條背景軌跡顏色,默認#333333
railOpacity:0.8,//滾動條背景軌跡透明度,默認0.2
allowPageScroll:true,//滾動條滾動到頂部或底部時是否允許頁面滾動,默認false
scrollTo:'50px',//跳轉到指定的滾動值。可以呼吁任何元素slimScroll已經啟用了嗎(沒試過)
scrollBy:'50px'增加/減少當前滾動值由指定的數量(正面或負面)。可以呼吁任何元素slimScroll已經啟用(沒試過)
disableFadeOut:true,//是否禁用鼠標在內容處一定時間不動隱藏滾動條,當設置alwaysVisible為true時該參數無效,默認false
touchScrollStep:1000,//可以設置不同的觸摸滾動事件的敏感性。負數反轉方向滾動,默認200

 

其他

官方參考:http://plugins.jquery.com/slimScroll/

http://danqingyu.com/152.html

http://rocha.la/jQuery-slimScroll/