CSS3 实现导航栏横向拖曳滚动

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

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

<style>
.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%;}
</style>
<nav class="m-nav">
    <ul>
        <li>首页</li>
        <li>新闻</li>
        <li>图片</li>
        <li>评论</li>
        <li>下载</li>
        <li>视频</li>
        <li>图文</li>
        <li>文字</li>
        <li>列表</li>
        <li>动物</li>
        <li>水果</li>
        <li>食物</li>
        <li>面食</li>
        <li>咸菜</li>
        <li>大蒜</li>
    </ul>
</nav>

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

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

2. 隐藏滚动条：
   首先我想到的是使用 ::-webkit-scrollbar{display:none;} 对滚动条进行隐藏，这样会导致页面中所有的滚动条都隐藏掉，显然这样一刀切的做法太激进；
   WC 是一个产生灵感的好场所，五分钟之后我想到了解决方法：将 ul 的高度增加，外层 div 高度不变，并使用 overflow:hidden; 对超出部分隐藏；这样就间接的解决了隐藏滚动条的问题；