本文實例為大家總結了滾動條插件slimScroll的使用方法，供大家參考，具體內容如下
simScroll插件項目下載地址：https://github.com/rochal/jQuery-slimScroll
TIP：
1.slimScroll在使用的時候要依賴JQ，所以首次使用的時候要引入JQ再引入simScroll插件
2.不支持resize的時候重新調用插件，不過有人已經修改過源碼，這是修改過的版本的下載地址：https://github.com/kujian/jQuery-slimScroll
resize重新調用插件增加的代碼部分：
function setScroll(){ $(".box-list").slimScroll({ height: boxHeight, alwaysVisible: true, });}setScroll();$(window).on("resize",setScroll);插件的調用以及參數設置：
$(function() { $(".slimscroll").slimScroll({ width: 'auto', //可滾動區域寬度 height: '100%', //可滾動區域高度 size: '10px', //組件寬度 color: '#000', //滾動條顏色 position: 'right', //組件位置：left/right distance: '0px', //組件與側邊之間的距離 start: 'top', //默認滾動位置：top/bottom opacity: .4, //滾動條透明度 alwaysVisible: true, //是否 始終顯示組件 disableFadeOut: false, //是否 鼠標經過可滾動區域時顯示組件，離開時隱藏組件 railVisible: true, //是否 顯示軌道 railColor: '#333', //軌道顏色 railOpacity: .2, //軌道透明度 railDraggable: true, //是否 滾動條可拖動 railClass: 'slimScrollRail', //軌道div類名 barClass: 'slimScrollBar', //滾動條div類名 wrapperClass: 'slimScrollDiv', //外包div類名 allowPageScroll: true, //是否 使用滾輪到達頂端/底端時，滾動窗口 wheelStep: 20, //滾輪滾動量 touchScrollStep: 200, //滾動量當用戶使用手勢 borderRadius: '7px', //滾動條圓角 railBorderRadius: '7px' //軌道圓角 });});slimScroll事件――當滾動條達到父容器的頂部或底部觸發事件：
$(selector).slimScroll().bind('slimscroll', function(e, pos){ console.log("Reached " + pos");});完整例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slimScroll插件使用例子</title></head><body> <div class="superDiv"> <div id="innerDiv"> <p>xxxxxxxxxxxxxx</p> </div> </div> <script src="jquery.min.js"></script> <script src="jquery.slimscroll.js"></script> <script> $(function(){ $('#innerDiv').slimScroll({ height: '250px' }); $('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ if(pos=='bottom'){ // 執行其他邏輯 } }); }); </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
