原生使用jQuery滚动条插件-jQuery custom content scroller

    <script src="./jquery.min.js"></script>
    <link rel="stylesheet" href="./jquery.mCustomScrollbar.min.css">
    <script src="./jquery.mCustomScrollbar.concat.min.js"></script>

        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 400px;
            height: 700px;
            background-color: #444540;
        }

        .content .text {
            height: 200px;
        }

 <div class="content mCustomScrollbar">
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
        <div class="text">1</div>
    </div>

给元素添加类mCustomScrollbar使元素实现可滚动。

使用js的方式使元素实现可滚动：

$(".content").mCustomScrollbar();

设置该元素的data-mcs-axis属性，"x"横向滚动，"y"纵向滚动。

使用js的方式设置横向滚动：

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

获取更多信息或者下载源码请访问：https://manos.malihu.gr/jquery-custom-content-scroller/