今天写一个模板的时候,在手机端需要横线罗列菜单,为减少占用空间,采用了横向滚动(滑动)效果,并且隐藏滚动条!
最后写的CSS还是不支持firefox,在firefox的浏览器上滚动条隐藏不掉。。。不管了,因为这个横向滚动是运用在手机端,不会出现firefox的问题!
相关:
1、纯CSS3自定义滚动条样式设置方法大全(不兼容firefox)
2、jQuery插件 -滚动条样式-jQuery custom content scroller,兼容所有浏览器,但太大,也容易卡
HTML:
<div id="maincate" class="maincate"> <a href="#">需要滚动菜单</a> <a href="#">需要滚动菜单</a> <a href="#">需要滚动菜单</a> <a href="#">需要滚动菜单</a> <a href="#">需要滚动菜单</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;} //隐藏滚动条! .maincate a{ height: 50px;display: inline;}
这个方法虽然不支持firefox,但用在移动端设备上是没有问题的!