站内搜索

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

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

先预览下效果吧

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

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


  • 上一篇:CSS3滤镜filter浅析
  • 下一篇:[css]全屏背景图片设置,django加载图片路径