尝试为水平滚动列表设置滚动条样式以创建此处的样式: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"
});
});
});
答案 0 :(得分:0)
检查您是否在
中添加了mcustomscrollbar<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