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

Question

尝试为水平滚动列表设置滚动条样式以创建此处找到的样式：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"
});
});
});

Answer 1

检查您是否在

<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，如下所示。

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

在 CSS 中将 .prodList overflow-x 值更改为 auto