淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

相关:

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

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

隐藏滚动条.png

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,但用在移动端设备上是没有问题的!