wap站 网页栏目滚动显示

wap站 网页栏目滚动显示

<div class="wrap"><ul class="stealth-scroll-bar am-cf"><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=7">公司注册</a></li><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=8">股权交易</a></li><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=9">资质审批</a></li><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=10">代理记账</a></li><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=11">社保代理</a></li><li class=""><a href="index.php?m=content&amp;c=index&amp;a=lists&amp;catid=12">税务疑难</a></li></ul></div>

.stealth-scroll-bar{scrollbar-base-color:transparent;scrollbar-3dlight-color:transparent;scrollbar-highlight-color:transparent;scrollbar-track-color:transparent;scrollbar-arrow-color:transparent;scrollbar-shadow-color:transparent;scrollbar-dark-shadow-color:transparent}
.stealth-scroll-bar::-webkit-scrollbar{width:0;height:0}
.wraps {position: relative;height:.8rem;width: 100%;background: #f5f5f5;padding-top: .1rem;}
.wraps ul{overflow-x: auto;-webkit-overflow-scrolling: touch;white-space: nowrap;background:#fff;width: 100%;height: .9rem;
border-bottom: 1px solid #e6e6e6;padding:0;}
.wraps ul li{font-size: .35rem;width:1.6rem;text-align: center;color:#0e223b;border-top:2px solid #fff;display: inline-block;line-height: 0.8rem;height: 0.8rem;} 
.wraps ul li:last-of-type{margin-right: 0;}
.wraps ul li.active{border-top:2px solid #2e73c8;color:#2f73c9;font-weight: bolder;}

左右滑动效果