Hide scroll bars and scroll bars

Hide scroll bars and scroll bars

Last week, I tried to use a horizontal scroll instead of a scroll bar style. I searched the internet and didn't try any effect. I just stole one ~

Preview The effect first.

Vs

OK, go to the Code ~

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;/* main */width: 100%; height: 50px;/* main */}. demo-tab ul {width: 100%; height: 60px;/* main */font-size: 0; background: # e8e8e8; overflow-x: scroll; /* main */overflow-y: hidden;/* main */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 ;}

To sum up, the height of the outer div is smaller than that of the ul/div in the lower layer or other elements, and then overflow: hidden

This is a known method. There may be other methods. I hope this method can be helpful to dev.

Nice to see. Reduced Size ~