我在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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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" alt="icon" 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>
答案 0 :(得分:-1)
请使用此css代码
.mCSB_scrollTools{
left:0!important;right:auto!important;
}
但我不确定你的css类和我在代码中编写的一样。如果不是,你可以更改类或只是将css规则放在你的css类选择器
中试图删除左:-55px形成你的div
<div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px; width: 570px;" dir="ltr">