现在移动端这么流行是毫无疑问的，几乎每一个真正需要运营的网站都开始配备一个移动版或者能够适配移动端。而移动设备屏幕的大小有限（尽管近年来手机屏幕越来越大），因此不能够像在PC上那样展示那么多的内容。经常我们有一个这样的需求：在移动端的顶部需要展示我内容的分类，假设有5-15个分类，这么多分类的名称，基本上有5个以内就能挤满一排，但如果我要用户都能选择该怎么办呢？

在PC端的做法就是，全部展现出来或者默认展示一行，点击按钮展开更多；全部展示出来在手机上是显然不行的，可能一个小屏幕手机打开页面一半都是分类了，那没法看，而点击展开虽然好些但还是不够好。而现在很多网站都使用了一种滑动风格：

上图就是知名的医疗类网站挂号网的手机端（上面的图是在电脑端模拟截图得到的），这里他就是一个滑动效果，这是模拟iPhone6 Plus的，也就是大屏手机的，默认能够展示六个半专家，实际上它这里有十几个专家，我们只需要左右滑动即可实现查看所有，在移动端这种体验是非常好的。而我们其实也用过这种方案，比如下面为湖南鼎金装饰建材公司的企业官网就是使用了这种效果：

那么该怎么做到呢？其实非常简单，只需要单纯的CSS3即可，实际上就用到了我们一个非常重要的CSS属性，那就是overflow，该属性规定当内容溢出元素框时发生的事情。有人会说这不是在CSS3以前就有的么，是的，该属性在CSS2中就有了；但是这里需要的overflow-x和overflow-y等是CSS3才新增的属性写法。下面就直接贴出一个演示了：

<div class="top-cat">
   <div class="cat">
      <ul class="cl">
         <li><a href="#">分类一</a></li>
         <li class="current"><a href="#">分类二</a></li>
         <li class="# "><a href="#">分类三</a></li>
         <li class="# "><a href="#">分类四</a></li>
         <li class="# "><a href="#">分类五</a></li>
         <li class="# "><a href="#">分类六</a></li>
      </ul>
   </div>
</div>

/*下面的overflow为了隐藏滚动条*/
.top-cat {
 position: relative;
 height: 46px;
 background: #fff;
 overflow: hidden;
}
/*这里的padding隐藏滚动条，overflow-x实现横排滚动*/
.cat {
 position: relative;
 padding: 0 2px 10px;
 height: 46px;
 overflow-y: hidden;
 overflow-x: scroll;
}

.cat ul {
 position: absolute;
 left: 0;
 border-bottom: 1px #f6f6f6 solid;
 white-space: nowrap;
}

.cat li {
 display: inline-block;
 height: 45px;
 line-height: 45px;
}

.cat li a {
 display: block;
 margin: 0 10px;
}

.cat .current-cat a {
 color: #1F56A7;
 border-bottom: 1px #1F56A7 solid;
}

以上代码就是上面那个项目中简化版代码，一个基本的样式，实际应用可以进一步加强用户体验。比如在项目中我们使用了一段js来控制展现到我们眼前的内容，当然除此之外还有其他的措施来加强用户体验。现在也贴出下面一段js代码来

<script type="text/javascript">
/*120可以根据实际来定，也可以使用动态的;用来计算滑动距离*/
var navleft = $('.current').position().left + 120 - document.body.clientWidth;
if(navleft ){
    $('.cat').scrollLeft(navleft);
}
</script>

以上代码的基本作用就是，动态监听我们的当前活动菜单的位置，然后计算内容区域到窗口边界的距离；实现的目标就是不管我们选择哪个菜单，我们都能看到它附近的菜单在可视区域内。比如默认第一个元素有了current选择器，那么可视区域可能是前面几个菜单内容；如果是第10个菜单活动状态，拥有了current选择器，那么就是它附近的几个菜单项在我们的可视区域内。

总之一句话，问题的核心就是使用了overflow-x，而其他的padding属性也好、js也好，等等一切都是为了增强用户体验的；实际上几乎所有的PC网站我们看到的其实overflow-y都是可滚动的，因此我们看网页的时候都是滚动鼠标或者滚动条往下看。