css实现h5页面滚动效果

由于手机屏幕空间较小，在手机端显示分类导航多时一行显示不全，常常在后面显示一个'更多',点击展开全部，选择后再隐藏。这种交互不时很完美，在用户反复选择时，就得来回点使其展开、隐藏。

在移动端有更好的展示方式，如'蜻蜓FM'app上的节目分类是采用的左右滚动方式，方便用户选择。

本文讲解下用css实现页面导航滚动效果.

<div class="rollBox">
<a href="###">前端工具</a> <a href="###">Android</a> <a href="###">插件使用</a> <a href="###">git</a> <a href="###">smarty</a> <a href="###">面试</a> <a href="###">linux</a> <a href="###">h5</a> <a href="###">app</a> <a href="###">node</a> <a href="###">部署</a> <a href="###">移动页面</a>
</div>

css样式代码：

{
margin: 0;
padding: 0;
}
html {
font-size: 2rem;
}
a:link {
text-decoration: none;
color: #0088cc
}
.rollBox {
height: 2rem;
line-height: 2rem;
clear: both;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
}如果需要把滚动条去掉，加上下面样式即可

/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
}