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

【问题标题】：How to style a scrollbar for a horizontal scroll list?如何为水平滚动列表设置滚动条样式？
【发布时间】：2017-08-11 06:52:38
【问题描述】：

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

【问题讨论】：

查看你的html中是否添加了mCustomscrollbar插件manos.malihu.gr/jquery-custom-content-scroller

标签： javascript jquery html css scrollbar

【解决方案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

【讨论】：