html 导航横向下拉,CSS3 实现导航栏横向拖曳滚动

通过 css3 可以不使用 js 实现横向导航栏的拖拽滚动效果：

小二儿，先上完整版代码...

.m-nav{height:36px;margin:8px 0;font-size:0;overflow:hidden;}

.m-nav ul{height:60px;white-space:nowrap;overflow-y:hidden;-webkit-overflow-scrolling:touch;}

.m-nav li{display:inline-block;width:36px;height:36px;margin-right:8px;vertical-align:top;background:#363951;border-radius:100%;}

.m-nav li:last-child{margin-right:12px;}

.m-nav li img{width:100%;height:100%;}

• 首页
• 新闻
• 图片
• 评论
• 下载
• 视频
• 图文
• 文字
• 列表
• 动物
• 水果
• 食物
• 面食
• 咸菜
• 大蒜

在实现的过程中有几个问题需要解释一下：

在 ios 下实现原生的滚动效果：

通过添加 -webkit-overflow-scrolling:touch; 样式实现 ios 下原生的流畅的滚动效果；但是这样会出现另一个问题，出现了滚动条，虽然在 ios 下滚动条是默认隐藏的，只有在滚动的时候才出现，但是对于完美主义者的前端攻城狮来说是不可容忍的；

隐藏滚动条：

首先我想到的是使用 ::-webkit-scrollbar{display:none;} 对滚动条进行隐藏，这样会导致页面中所有的滚动条都隐藏掉，显然这样一刀切的做法太激进；

WC 是一个产生灵感的好场所，五分钟之后我想到了解决方法：将 ul 的高度增加，外层 div 高度不变，并使用 overflow:hidden; 对超出部分隐藏；这样就间接的解决了隐藏滚动条的问题；