由於手機螢幕空間較小，在手機端顯示分類導航多時一行顯示不全，常常在後面顯示一個'更多',點選展開全部，選擇後再隱藏。這種互動不時很完美，在使用者反覆選擇時，就得來回點使其展開、隱藏。

在移動端有更好的展示方式，如'蜻蜓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;
}