本文實例為大家總結了滾動條插件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>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答