当前位置:Gxlcms > html代码 > 横向滑动/滚动隐藏滚动条

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

时间:2021-07-01 10:21:17 帮助过:21人阅读

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

先预览下效果吧

Vs

ok,上代码~

HTML:

<div class="demo-tab">
  <ul id="items">
    <li class="item"><div class="item-on">div>li>
    <li calss="item"><div>div>li>
    <li class="item"><div>div>li>
    <li class="item"><div>div>li>
  ul>
div>

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有帮助。

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


人气教程排行