今天寫(xiě)一個(gè)模板的時(shí)候，在手機(jī)端需要橫線(xiàn)羅列菜單，為減少占用空間，采用了橫向滾動(dòng)(滑動(dòng))效果，并且隱藏滾動(dòng)條！
最后寫(xiě)的CSS還是不支持firefox，在firefox的瀏覽器上滾動(dòng)條隱藏不掉。。。不管了，因?yàn)檫@個(gè)橫向滾動(dòng)是運(yùn)用在手機(jī)端，不會(huì)出現(xiàn)firefox的問(wèn)題！
相關(guān)：
1、純CSS3自定義滾動(dòng)條樣式設(shè)置方法大全（不兼容firefox）
2、jQuery插件 -滾動(dòng)條樣式-jQuery custom content scroller，兼容所有瀏覽器，但太大，也容易卡
HTML：
<div id="maincate" class="maincate"> <a href="#">需要滾動(dòng)菜單</a> <a href="#">需要滾動(dòng)菜單</a> <a href="#">需要滾動(dòng)菜單</a> <a href="#">需要滾動(dòng)菜單</a> <a href="#">需要滾動(dòng)菜單</a> ..... </div>
CSS：
.maincate{width:100%; height: 50px;line-height: 50px;white-space: nowrap;box-shadow: 0 1px 2px rgba(0,0,0,.1);
overflow-x: scroll; /* 1 */
overflow-y: hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-overflow-scrolling: touch; /* 2 */
text-align: justify; /* 3 */
}
.maincate::-webkit-scrollbar{display: none;} //隱藏滾動(dòng)條！
.maincate a{ height: 50px;display: inline;}這個(gè)方法雖然不支持firefox，但用在移動(dòng)端設(shè)備上是沒(méi)有問(wèn)題的！