nicescroll隱藏垂直滾動,保留橫向滾動

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu slimtest1" aria-labelledby="dropdownMenu2" id="testul" style="overflow-x: auto;width: 550px">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

樣式

<style>
    #testul{
        background: rgba(247, 247, 247, 0.7);
        max-width: 650px;
        height: 42px;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #testul li{
        color: white;
        display: inline-block;
        text-align: -webkit-match-parent;
        margin-left: 10px;
        height: 22px;
        line-height: 22px;
        font-weight: normal;
        font-family: "Poppins", sans-serif;
        font-size: smaller;
    }
</style>

js

  <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
    <script>

        var nice =
            $(".slimtest1").niceScroll({
                cursorcolor: '#868686',
                cursorwidth: '10',
                // cursorminheight: '64',
                scrollspeed: '50',
                autohidemode: true,
                overflowy: 'false'
            });

        var _super = nice.getContentSize;

        nice.getContentSize = function () {
            var page = _super.call(nice);
            page.h = nice.win.height();
            return page;
        };
        $('.nicescroll-rails.nicescroll-rails-vr').remove();

    </script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容