如何使用 CSS 设置 mCustomScrollbar 的宽度

Posted 2023-05-09

【中文标题】如何使用 CSS 设置 mCustomScrollbar 的宽度

【英文标题】：How to set the width of mCustomScrollbar using CSS

【发布时间】：2019-03-09 14:20:29

【问题描述】：

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

$('#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>

代码如下：

【参考方案1】：

试试这个，我认为它需要被覆盖，但覆盖不是一个好习惯。 我希望这会有所帮助

.mCSB_dragger_bar
    width:13px!important;
 

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

.mCSB_draggerRail
    width:13px!important;

【讨论】：

避免使用!important。它禁用依赖于内联 style 的 javascript。原则上，最好使用selector:not(#_) 来人为地夸大特异性。当需要大于 1 × id 的选择器时，:not(#_):not(#_) 也可以使用。因此，在上述情况下，.mCSB_dragger_bar:not(#_) 将避免使用 !important。

@AndreiGheorghiu，是的，正如你所看到的，我在上面已经说过，使用 !important 覆盖不是一个好习惯。

【参考方案2】：

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

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

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

【讨论】：

它不起作用，尝试更新你的css关于问题sn-p不会改变任何东西/

【参考方案3】：

将以下样式添加到您的样式表

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



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