你的位置:首页 > 网页设计

[网页设计]横向滑动/滚动隐藏滚动条


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

先预览下效果吧

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

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