橫向滑動/滾動隱藏滾動條

上週，由於要用到能夠橫向滾動，不能出現滾動條的樣式，網上搜了一圈也沒有點想要的效果，乾脆去偷一個~

先預覽下效果吧

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

美圖，請欣賞，縮小尺寸了~

---