<div id="ios_scroll_hidden">
    <div id="nav"  class="no_scroll">
        <a class="active" 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>

#ios_scroll_hidden{
    height: 5.4rem;  /*高度设置小一点*/
    overflow: hidden;/*隐藏苹果滚动条*/
}
#nav{
    display: flex; /*区块一行显示*/
    width: 100%;
    height: 6rem;
    overflow-x: scroll;
    overflow-y: hidden; /*支持滑动*/
    white-space: nowrap; /*不换行*/
    -webkit-overflow-scrolling: touch;  /*解决滑动卡顿*/
    background: #fff;
    padding:0 0.5rem;
}
#nav a{
    display: block;
    flex-shrink: 0; /*不被缩放*/
    font-size: 2rem;
    line-height: 6rem;
    padding:0 1rem;
    position: relative;
}
#nav a.active{
    color:#c9423f;
}
#nav a.active:before{
    content: '';
    position:absolute;
    width:100%;
    height: 2px;
    bottom:0.6rem;
    left:0px;
    background: #c9423f;
}