如何设置mCustomScrollbar总是离开?

时间:2016-11-02 12:40:01

标签: javascript html css css3 mcustomscrollbar

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

1 个答案:

答案 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">