CSS实现移动端横向滚动导航条，仿今日头条滚动导航-蒲公英云

CSS实现移动端横向滚动导航条，仿今日头条滚动导航

应用场景

现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例：
今日头条
aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQyNTY5MzAtMTIyMDUyOTUzOC5naWY

b站
aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQzMjYxNzYtMjA0NDg3ODE5MS5naWY

代码实现

HTML代码：

<div class="nav">
    <a href="#">关注</a>
    <a href="#">推荐</a>
    <a href="#">新闻</a>
    <a href="#">社会</a>
    <a href="#">国际</a>
    <a href="#">军事</a>
    <a href="#">娱乐</a>
    <a href="#">三农</a>
    <a href="#">直播</a>
    <a href="#">小视频</a>
    <a href="#">问答</a>
    <a href="#">体育</a>
    <a href="#">科技</a>
</div>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>

CSS代码：

.nav { 
    width: 100%;
    height: 50px;
    line-height: 50px;
    /*段落中文本不换行*/
    white-space: nowrap;
    /*阴影*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    /*设置横向滚动*/
    overflow-x: scroll;
    /*禁止纵向滚动*/
    overflow-y: hidden;
    /*文本平铺*/
    text-align: justify;
    /*背景颜色*/
    background: #F4F5F6;
    padding: 0px 5px;
    margin-bottom: 10px;
    /*设置边距改变效果为内缩*/
    box-sizing: border-box;
}
.nav a { 
    color: #505050;
    /*取消超链接下划线*/
    text-decoration: none;
    margin: auto 10px;
}
.nav::-webkit-scrollbar { 
    /*隐藏滚动条*/
    display: none;
}