注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梨花寨

 
 
 

日志

 
 
 
 

css实现h5页面滚动效果  

2016-10-05 08:47:23|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

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

html代码:



<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;
}

本文来源梨花寨,查看更多技术文章。

  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018