您的位置:首页 > Web前端 > CSS

css实现h5页面滚动效果

2016-03-08 16:36 615 查看
本文讲解下用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;
}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: