【轉載】jquery 滾動條插件jquery.slimscroll.js
阿新 • • 發佈:2018-01-22
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