先上效果圖，如下：

是不是經常看到此類效果？

這裏如果不借用其它框架，單純的利用css 來實現怎麽做呢？

1.這一看就要用到overflow，但是用它會有一個默認的滾動條；

2.那麽重點來了，怎麽解決這個問題呢？

3.用 ::-webkit-scrollbar 就可以很好地解決。

代碼如下：

css

* {
        padding: 0;
        margin: 0; 
    } 
    .nav {
        position: fixed;
        top: 0;
        background: white;
        width: 100%;
        height: 30px;
        overflow-x: auto;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
        .nav ul {
            width: 200%;
            height: 100%;
        }
            .nav ul li {
                float: left;
                list-style: none;
                width: 10%;
                height: 100%;
                text-align: center;
                line-height: 30px;
            }
 

html:

<div class="nav">
    <ul>
        <li>頭條</li>
        <li>新聞</li>
        <li>搞笑</li>
        <li>視頻</li>
            <li>動漫</li>
        <li>科技</li>
        <li>農業</li>
        <li>社會</li>
 

        <li>人文</li>
    </ul>
</div>    

好，大功告成。

css - (左右滑動 時，隱藏底部滾動條)