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

老白 8个月前 706浏览 0评论

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

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

相关:

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

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

隐藏滚动条.png CSS 横向菜单允许滚动(滑动)并隐藏滚动条(移动端) CSS学习

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

发表评论