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

检查您是否在

中添加了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

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

1 个答案: