如何设置 mCustomScrollbar 总是离开？

Question

我在 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>

Answer 1

请使用此 css 代码

.mCSB_scrollTools{
    left:0!important;right:auto!important;
}

但我不确定您的 css class 是否与我在代码中编写的相同。如果不是，您可以更改 class 或将 css 规则放入 css class 选择器

尝试从您的 div

中删除 left:-55px

<div id="mCSB_3_container" class="mCSB_container" style="position: relative; top: 0px;  width: 570px;" dir="ltr">

如何设置 mCustomScrollbar 总是离开？

how to set mCustomScrollbar always left?

javascript

html

css

mcustomscrollbar