CSS 横向菜单允许滚动(滑动)并隐藏滚动条（移动端）

《CSS 横向菜单允许滚动(滑动)并隐藏滚动条（移动端）》正文开始，本次阅读大概8分钟。

今天写一个模板的时候，在手机端需要横线罗列菜单，为减少占用空间，采用了横向滚动(滑动)效果，并且隐藏滚动条！

最后写的CSS还是不支持firefox，在firefox的浏览器上滚动条隐藏不掉。。。不管了，因为这个横向滚动是运用在手机端，不会出现firefox的问题！

相关：

1、纯CSS3自定义滚动条样式设置方法大全（不兼容firefox）

2、jQuery插件 -滚动条样式-jQuery custom content scroller，兼容所有浏览器，但太大，也容易卡

HTML：

divid=maincateclass=maincate
ahref=#需要滚动菜单/a
ahref=#需要滚动菜单/a
ahref=#需要滚动菜单/a
ahref=#需要滚动菜单/a
ahref=#需要滚动菜单/a
.....
/div

CSS：

.maincate{width:100%;height:50px;line-height:50px;white-space:nowrap;box-shadow:01px2pxrgba(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;}//隐藏滚动条！
.maincatea{height:50px;display:inline;}

这个方法虽然不支持firefox，但用在移动端设备上是没有问题的！