最后写的CSS还是不支持firefox,在firefox的浏览器上滚动条隐藏不掉。。。不管了,因为这个横向滚动是运用在手机端,不会出现firefox的问题!
相关:
1、纯CSS3自定义滚动条样式设置方法大全(不兼容firefox)
2、jQuery插件 -滚动条样式-jQuery custom content scroller,兼容所有浏览器,但太大,也容易卡
HTML:
<divid="maincate"class="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,但用在移动端设备上是没有问题的!