移动端导航栏一行显示可左右滑动，去掉滑动滚动条

 

1.css

<style>
        /*去掉移动端tab栏的滚动条 start*/
        
        .nav-wrap::-webkit-scrollbar {
            display: none;
        }
        /*去掉移动端tab栏的滚动条 end*/
        
        .nav-height {
            position: relative;
            height: 50px;
        }
        
        .nav-wrap {
            display: flex;
            white-space: nowrap;
            /*overflow-x: scroll;*/
            overflow-y: hidden;
            width: 100%;
            height: 50px;
            background: #fff;
        }
        
        .nav-wrap.navFix {
            position: fixed;
            top: 0;
            left: 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid #e3e3e3;
            z-index: 99999;
        }
        
        .nav-wrap ul {
            padding: 0;
            margin: 0 auto;
            width: 1200px;
            display: block;
            border-bottom: 2px solid #eee;
        }
        
        .nav-wrap.navFix ul {
            border-bottom: 0;
        }
        
        .nav-wrap li {
            display: inline-block;
            text-align: left;
            height: 50px;
            line-height: 50px;
        }
        
        .nav-wrap li a {
            display: block;
            padding: 0 20px;
            font-size: 20px;
            color: #333;
            text-decoration: none;
        }
        
        .nav-wrap li a:hover {
            color: #4680d1;
        }
        
        .nav-wrap li a.active {
            background-color: #4680d1;
            color: #fff;
            border-radius: 2rem;
        }
    </style>

2.html

 <nav class="nav-height" id="navHeight">
        <ul class="nav-wrap ltop" id="nav-wrap">
            <div class="container">
                <li><a class="active" href="#section1">公司简介</a></li>
                <li><a class="" href="#section2">公司文化</a></li>
                <li><a class="" href="#section3">发展历程</a></li>
                <li><a class="" href="#section4">业务架构</a></li>
                <li><a class="" href="#section5">行业范围</a></li>
                <li><a class="" href="#section6">主要客户</a></li>
                <li><a class="" href="#section7">合作伙伴</a></li>
            </div>
        </ul>
    </nav>