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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。