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

资料来源：网络整理时间：2023/3/4 1:05:06 共计：3596 浏览

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

最后写的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，但用在移动端设备上是没有问题的！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS3圆圈动画放大缩小循环动画效果_CSS学习 | ·下一条：CSS垂直翻转/水平翻转学习_CSS学习