jquery滾動條插件slimScroll

時間 2019-11-13

標籤 jquery 滾動條插件 slimscroll 欄目 JQuery 简体版

原文原文鏈接

參數html
width: 'auto', //可滾動區域寬度jquery
 
          
 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'  
 //軌道圓角 

    

  DEMO 

    
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.11.3.min.js"></script>
 <script src="jquery.slimscroll.min.js"></script>
 <style>
 .demo{
 max-height: 200px;
 width: 100px;
 border: 1px solid #008080;
 margin:0px auto;
 margin-top: 50px;
 /*overflow: hidden;*/
 }
 .li{
 list-style: none;
 height: 50px;
 width: 80px;
 margin: 10px auto;
 }
 .bg-006600{
 background: #006600;
 }
 .bg-006633{
 background: #006633;
 }
 .bg-006666{
 background: #006666;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <div id="demo">
 <ul style="margin: 0;padding: 0;">
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 <li class="li bg-006600"></li>
 <li class="li bg-006633"></li>
 <li class="li bg-006666"></li>
 </ul>
 </div>
 </div>
 <script>
 function setScroll(){
 $("#demo").slimScroll({
 width: 'auto',
 height: 'auto',
 start: 'bottom', //默認滾動位置：top/bottom
 borderRadius: '0px', //滾動條圓角
 railBorderRadius: '0px',//軌道圓角
 disableFadeOut: false, //是否 鼠標通過可滾動區域時顯示組件，離開時隱藏組件
 alwaysVisible: true, //是否 始終顯示組件
 });
 }
 setScroll();
 //$(window).on("resize",setScroll);
 </script>
 </body>
</html>app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。