如何使用CSS设置mCustomScrollbar的宽度

时间:2018-10-04 08:41:11

标签: javascript jquery html css mcustomscrollbar

我正在尝试通过设置documentation中所述的.mCSB_dragger的宽度来增加滚动条的宽度。但是滚动条的宽度保持不变。

$('#container1').mCustomScrollbar({ 
        theme:"dark-3"        
});

$(document).on('click', '.participants li', function(e){
  
});
#container1 {
    height:200px;
    width:100px;
    padding:5px;
    border:1px solid black;
}

 .mCSB_dragger{
    width:25px;
 }
<link rel="stylesheet" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="container1">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>6</p>
  <p>6</p>
</div>

代码如下:

3 个答案:

答案 0 :(得分:2)

尝试这个,我认为它需要被覆盖,但是覆盖不是一个好习惯。 希望对您有帮助

.mCSB_dragger_bar{
    width:13px!important;
 }

如果您希望滚动旋钮也调整其宽度,则也可以覆盖

.mCSB_draggerRail{
    width:13px!important;
}

答案 1 :(得分:0)

在css下方添加,就一切就绪...现在检查...

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px !important;
}

注意:根据您的要求更改宽度。

答案 2 :(得分:0)

将以下样式添加到样式表中

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
    width:15px !important;
}


.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width:15px !important;
}