如何设置水平滚动列表的滚动条样式？

试图风格水平滚动列表的滚动条来创建这里找到风格：http://manos.malihu.gr/code-example/horizontal-custom-scrollbar-tutorial/ （也想改变滚动条的颜色）如何设置水平滚动列表的滚动条样式？

jQuery的mCustomScrollBar功能这么想的似乎工作。这里是我的代码的链接：https://codepen.io/KevinM818/pen/WEjBVW

<section class="productSlider"> 
     <div class="prodList"> 
      <ul class="list-inline"> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
       <li class="prodItem"><a href="#"><img src="http://via.placeholder.com/300x150"></a></li> 
      </ul> 
     </div> 
    </section>

.productSlider { 
    padding: 100px 0; 
    h1 { 
     text-align: center; 
     font-weight: bold; 
     padding-bottom: 50px; 
    } 
    .prodList { 
     margin: 0 auto; 
     overflow-x: scroll; 
     overflow-y: hidden; 
     width: 82%; 
     .prodItem { 
      padding: 0 50px; 
     } 
     .list-inline { 
      white-space: nowrap; 
     } 
    } 
}

$(document).ready(function(){ 
    $(window).on("load",function(){ 
    $(".prodList").mCustomScrollbar({ 
     axis:"x", 
     theme:"dark-3" 
    }); 
    }); 
});

来源

2017-08-11 Kevin Mangal

检查你是否在已添加的mCustomscrollbar插件您的HTML http://manos.malihu.gr/jquery-custom-content-滚轮/ – PraveenKumar

检查您是否已经在你的

<link rel="stylesheet" type="text/css" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css"> 
<script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

更改您的jQuery添加mcustomscrollbar如下。

$(document).ready(function(){ 
    $(".prodList").mCustomScrollbar({ 
     axis:"x", 
     theme:"dark-3" 
    }); 
});

而且在CSS变化.prodList溢出-x值自动

来源

2017-08-11 07:25:08 PraveenKumar

如何设置水平滚动列表的滚动条样式？

回答

相关问题