如何设置 mCustomScrollbar 总是离开？
Posted
技术标签:
【中文标题】如何设置 mCustomScrollbar 总是离开？【英文标题】：how to set mCustomScrollbar always left? 【发布时间】：2017-03-15 18:43:27 【问题描述】：mCustomScrollbar 初始化有一些问题。 当我初始化他时，他的容器（mCSB_container）向左跳：-55px；但应该留下：0；我不知道为什么。可能有人有想法。 Problem image
这是 mcustomScrollbar 初始化的容器代码
.te-tournament-table-container .te-tournament-table-scrolling
padding-left: 0;
position: relative;
阻止我需要水平滚动的内容
.te-tournament-table-container .rounds-wrapper
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
html 代码
<div class="te-tournament-table row mCustomScrollbar _mCS_4 mCS-autoHide" style="position: relative; overflow: visible;"><div id="mCSB_4" class="mCustomScrollBox mCS-minimal mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0"><div id="mCSB_4_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;" dir="ltr">
<div class="te-tournament-table-posa col-md-4 col-xs-6">
<div class="te-users-container">
<div class="te-header-table">
<div class="te-static-name">
<span>Игрок</span>
<span class="rate"></span>
</div>
<div class="te-static-score">
<span>Очки</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=3">player3</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1849</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>2</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=4">Player4</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1712</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>3</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=5">player5</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1255</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>0</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=6">player6</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1622</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>3</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=7">player7</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1536</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>1</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=2">player2</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1420</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1486</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>1</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=1">admin</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">1705</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">2500</span>
</div>
</div>
</div>
<div class="te-user-score">
<span>4</span>
</div>
</div>
<div class="te-user">
<div class="te-user-name">
<span><a href="/users?id=11">player111</a></span>
<div class="user-scores">
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score">111</span>
</div>
<div class="online-user-score-container">
<span class="user-online-score-icon">
<img src="/bitrix/templates/chess/images/icons/transf-chess.png" class="mCS_img_loaded">
</span>
<span class="user-online-score"></span>
</div>
</div>
</div>
<div class="te-user-score">
<span>2</span>
</div>
</div>
</div>
</div>
<div class="te-tournament-table-scrolling col-md-8 col-xs-6 mCustomScrollbar _mCS_3" id="tournament-scroll"><div id="mCSB_3" class="mCustomScrollBox mCS-rounded-dark mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0"><div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 570px;" dir="ltr">
</div><div id="mCSB_3_scrollbar_horizontal" class="mCSB_scrollTools mCSB_3_scrollbar mCS-rounded-dark mCSB_scrollTools_horizontal" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_3_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 14px; display: block; left: 0px;"><div class="mCSB_dragger_bar"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
</div></div><div id="mCSB_4_scrollbar_vertical" class="mCSB_scrollTools mCSB_4_scrollbar mCS-minimal mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_4_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; display: block; height: 352px; max-height: 342px; top: 10px;"><div class="mCSB_dragger_bar" style="line-height: 50px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div>
【问题讨论】：
请同时提供您的 html 代码。没有人只能在浏览器中渲染 css 【参考方案1】：请使用这个css代码
.mCSB_scrollTools
left:0!important;right:auto!important;
但我不确定您的 css 类是否与我在代码中编写的相同。如果不是，您可以更改类或将 css 规则放入您的 css 类选择器中
尝试从你的 div 中删除 left:-55px
<div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px; width: 570px;" dir="ltr">
【讨论】：
它有帮助，但现在 mCSB_scrollTools 消失了 你能把你的 html 发给你吗？我需要了解如何构建您的 html 这就是它的初始化方式 你设置了左边 不，这是加载页面时设置的插件，这已经存在以上是关于如何设置 mCustomScrollbar 总是离开？的主要内容，如果未能解决你的问题，请参考以下文章
获取 jQuery 插件 mCustomScrollbar 不是 Webpack 设置的函数错误
jquery mCustomScrollbar 滚动条宽度的设置