1. 程式人生 > >【轉載】jquery 滾動條插件jquery.slimscroll.js

【轉載】jquery 滾動條插件jquery.slimscroll.js

query 推薦 page 默認 tor post w3c 設置 scrip

轉載http://www.w3cways.com/1910.html

jquery.slimscroll.js插件是一個支持把內容放在一個盒子裏面,固定一個高度,超出的則使用滾動。 jquery.slimscroll.js不僅可以定義高度、寬度,還可以定義位置、滾動條大小、尺寸、顏色以及眾多參數自定義,非常不錯,推薦大家使用。

官網地址:https://github.com/kujian/jQuery-slimScroll CND:http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.js 使用方法: 引入jQuery & jquery.slimscroll.js

$(function(){
$(‘#inner-content-div‘).slimScroll({ 
    width: ‘250px‘ 
}); 
}); 

參數 

 $(selector).slimScroll({ 
    width: ‘300px‘, //容器寬度,默認無 
    height: ‘500px‘, //容器高度,默認250px 
    size: ‘10px‘, //滾動條寬度,默認7px 
    position: ‘left‘, //滾動條位置,可選值:left,right,默認right 
    color: ‘#ffcc00‘, //滾動條顏色,默認#000000 
    alwaysVisible: true, //是否禁用隱藏滾動條,默認false 
    distance: ‘20px‘, //距離邊框距離,位置由position參數決定,默認1px 
    start: $(‘#child_image_element‘), //滾動條初始位置,可選值top,bottom,$(selector)--內容元素位置,默認top 
    railVisible: true, //滾動條背景軌跡,默認false 
    railColor: ‘#222‘, //滾動條背景軌跡顏色,默認#333333 
    railOpacity: 0.3, //滾動條背景軌跡透明度,默認0.2 
    wheelStep: 10, 滾動條滾動值,默認20 
    allowPageScroll: false, //滾動條滾動到頂部或底部時是否允許頁面滾動,默認false 
    disableFadeOut: false //是否禁用鼠標在內容處一定時間不動隱藏滾動條,當設置alwaysVisible為true時該參數無效,默認false
 });

  

【轉載】jquery 滾動條插件jquery.slimscroll.js