两个滚动条使用相同的 css

Question

我正在使用custom scrollbar，添加一个滚动条非常容易，但是如果我想添加第二个，他们两次使用一个 mCustomScrollbar.css 我不知道如何更改第二个 div。我正在查看demo custom scrollbar 上的代码，但这只是失败了。

JQUERY

(function($){
    $(window).load(function(){
        $(".suwak").mCustomScrollbar();
    });
})(jQuery);

HTML

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

<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>

一些简单的 CSS

.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}

Answer 1

只需使用 class="suwak" 在 div 上添加另一个类，这将运行您的滚动条，而您的第二类将帮助覆盖您的第一类。在 css 中，您是说，如果某些东西同时具有两个类，请使用新样式。在 css 中，您的选择器将是 .suwak.suwak2，在 css 中的类之间没有空格。

<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>

.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}

.suwak.suwak2 {
/*new stile*/
}

Answer 2

你为什么不也使用二等舱呢？是不是你不知道有多少 DIV 会有相同的滚动条？

如果只限2个，那就试试

(function($){
$(window).load(function(){
    $(".suwak").mCustomScrollbar();
    $(".suwak2").mCustomScrollbar();
});
})(jQuery);

或者您也可以为第二个 DIV 提及相同的类。根据我对您发布的代码的观察，我提出了这个建议。