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

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

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

那么該怎么做到呢？其實(shí)非常簡(jiǎn)單，只需要單純的CSS3即可，實(shí)際上就用到了我們一個(gè)非常重要的CSS屬性，那就是overflow，該屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。有人會(huì)說(shuō)這不是在CSS3以前就有的么，是的，該屬性在CSS2中就有了；但是這里需要的overflow-x和overflow-y等是CSS3才新增的屬性寫法。下面就直接貼出一個(gè)演示了：

<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為了隱藏滾動(dòng)條*/
.top-cat {
 position: relative;
 height: 46px;
 background: #fff;
 overflow: hidden;
}
/*這里的padding隱藏滾動(dòng)條，overflow-x實(shí)現(xiàn)橫排滾動(dòng)*/
.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;
}

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

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

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

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