css實現h5頁面滾動效果

本文講解下用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;
}