横向滑动/滚动隐藏滚动条

来源：懂视网责编：小采时间：2020-11-27 16:41:12

横向滑动/滚动隐藏滚动条

横向滑动/滚动隐藏滚动条:上周，因为要用到可以横向滚动，不能出现滚动条的样式，网上搜了一圈也没有点想要的效果，干脆去偷一个~ 先预览下效果吧 Vs ok，上代码~ HTML: div class=demo-tab

推荐度：

点击下载本文 文档为doc格式

导读横向滑动/滚动隐藏滚动条:上周，因为要用到可以横向滚动，不能出现滚动条的样式，网上搜了一圈也没有点想要的效果，干脆去偷一个~ 先预览下效果吧 Vs ok，上代码~ HTML: div class=demo-tab

上周，因为要用到可以横向滚动，不能出现滚动条的样式，网上搜了一圈也没有点想要的效果，干脆去偷一个~

先预览下效果吧

ok，上代码~

HTML:

CSS:

.demo-tab{
 position:fixed;
 bottom:41px;
 overflow:hidden;/*主要*/
 width:100%;
 height:50px;/*主要*/
}
.demo-tab ul{
 width:100%;
 height:60px;/*主要*/
 font-size:0;
 background:#e8e8e8;
 overflow-x:scroll;/*主要*/
 overflow-y:hidden;/*主要*/
 white-space:nowrap;
}
.item{
 display:inline-block;
 width:33.3333333%;
 height:100%;
 padding:10px 0;
 font-size:18px;
 background:#9c9c9c;
}
.item-on{
 height:12px;
 background:#04be02;
}

总结一下，其实就是外层的div的高度要比里层ul/div或者其它元素的高度小，然后overflow:hidden

这是目前已知的一种，也许还会有其它方法吧，希望这个方法能对dev有帮助。

美图，请欣赏，缩小尺寸了~