使用相同的 css 的两个滚动条

Two scrollbar using the same css

本文关键字:两个 滚动条 css      更新时间:2023-09-26

我正在使用自定义滚动条,添加一个滚动条非常容易,但是如果我想添加第二个滚动条,他们会两次使用一个mCustomScrollbar.css我不知道如何更改第二个div。我正在演示自定义滚动条上查看代码,但这失败了。

简讯

(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;
}

只需在div 上添加另一个类 class="suwak",这将运行您的滚动条,您的第二个类将有助于覆盖您的第一个类。在 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*/
}

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

如果仅限于 2,请尝试

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

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