現(xiàn)在移動端這么流行是毫無疑問的，幾乎每一個真正需要運營的網(wǎng)站都開始配備一個移動版或者能夠適配移動端。而移動設(shè)備屏幕的大小有限（盡管近年來手機屏幕越來越大），因此不能夠像在PC上那樣展示那么多的內(nèi)容。經(jīng)常我們有一個這樣的需求：在移動端的頂部需要展示我內(nèi)容的分類，假設(shè)有5-15個分類，這么多分類的名稱，基本上有5個以內(nèi)就能擠滿一排，但如果我要用戶都能選擇該怎么辦呢？

在PC端的做法就是，全部展現(xiàn)出來或者默認展示一行，點擊按鈕展開更多；全部展示出來在手機上是顯然不行的，可能一個小屏幕手機打開頁面一半都是分類了，那沒法看，而點擊展開雖然好些但還是不夠好。而現(xiàn)在很多網(wǎng)站都使用了一種滑動風格：

上圖就是知名的醫(yī)療類網(wǎng)站掛號網(wǎng)的手機端（上面的圖是在電腦端模擬截圖得到的），這里他就是一個滑動效果，這是模擬iPhone6 Plus的，也就是大屏手機的，默認能夠展示六個半專家，實際上它這里有十幾個專家，我們只需要左右滑動即可實現(xiàn)查看所有，在移動端這種體驗是非常好的。而我們其實也用過這種方案，比如下面為湖南鼎金裝飾建材公司的企業(yè)官網(wǎng)就是使用了這種效果：

那么該怎么做到呢？其實非常簡單，只需要單純的CSS3即可，實際上就用到了我們一個非常重要的CSS屬性，那就是overflow，該屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情。有人會說這不是在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實現(xiàn)橫排滾動*/
.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;
}

以上代碼就是上面那個項目中簡化版代碼，一個基本的樣式，實際應(yīng)用可以進一步加強用戶體驗。比如在項目中我們使用了一段js來控制展現(xiàn)到我們眼前的內(nèi)容，當然除此之外還有其他的措施來加強用戶體驗?，F(xiàn)在也貼出下面一段js代碼來

<script type="text/javascript">
/*120可以根據(jù)實際來定，也可以使用動態(tài)的;用來計算滑動距離*/
var navleft = $('.current').position().left + 120 - document.body.clientWidth;
if(navleft ){
    $('.cat').scrollLeft(navleft);
}
</script>

以上代碼的基本作用就是，動態(tài)監(jiān)聽我們的當前活動菜單的位置，然后計算內(nèi)容區(qū)域到窗口邊界的距離；實現(xiàn)的目標就是不管我們選擇哪個菜單，我們都能看到它附近的菜單在可視區(qū)域內(nèi)。比如默認第一個元素有了current選擇器，那么可視區(qū)域可能是前面幾個菜單內(nèi)容；如果是第10個菜單活動狀態(tài)，擁有了current選擇器，那么就是它附近的幾個菜單項在我們的可視區(qū)域內(nèi)。

總之一句話，問題的核心就是使用了overflow-x，而其他的padding屬性也好、js也好，等等一切都是為了增強用戶體驗的；實際上幾乎所有的PC網(wǎng)站我們看到的其實overflow-y都是可滾動的，因此我們看網(wǎng)頁的時候都是滾動鼠標或者滾動條往下看。