css实现h5页面滚动效果
2016-03-08 16:36
615 查看
本文讲解下用css实现页面导航滚动效果
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; }
相关文章推荐
- 巧用cssText属性批量操作样式
- css3圈圈进度条
- CSS垂直水平完全居中手册
- div中文字水平和垂直居中的css代码
- css实现三角箭头(兼容IE6)
- css3伪类温故知新
- CSS清除浮动
- CSS定位属性
- Cnblogs自定义皮肤css样式-星空观测者
- 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码
- css单位
- CSS常用的属性命名
- 前端试题-CSS试题(1)
- CSS笔记2-样式选择器
- Css 学习笔记--样式引入方式及按权重判断优先级
- CSS3 animation 属性 CSS3 @keyframes 规则
- css中em,rem的解析成px的原理及混用场景
- 解决子元素用css float浮动后父级元素高度自适应高度
- CSS渲染速度改善的十个方法与建议
- 单选 多选按钮的选择