當我們的內容超出了我們的div,往往會出現滾動條,影響美觀。
尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條,也不希望超出去的內容被放逐,就要保留鼠標滾動的效果。
這裏介紹一個簡單的方法。 大體思路是在div外面再套一個div。這個div設置overflow:hidden。
而內容div設置 overflow-y: scroll;overflow-x: hidden;
然後再設置外層div的width小於內層div的width。
這個內層div其實是會出現滾動條的,所以不影響鼠標的滾動效果,而且我們看不到滾動條了。
內層div效果:
套上外層div效果後:
css代碼:
.nav_wrap{
height: 400px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
margin: 20px auto;
}
.nav_ul{
height: 100%;
width: 220px;
overflow-y: auto;
overflow-x: hidden;
}
.nav_li{
border: 1px solid #ccc;
margin: -1px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
width: 200px;
}
.btn_wrap{
text-align: center;
}
<div class= "nav_wrap">
<ul class= "nav_ul">
<li class="nav_li">我是菜單1</li>
<li class="nav_li">我是菜單2</li>
</ul>
</div>
之前的一個項目中的菜單用到了這個技巧。那個項目用了iframe。 也是讓滾動條被遮住了。
今天又順手把目前在做的項目中的導航菜單的滾動條去掉了。 簡單總結下來。
演示:http://runningls.com/demos/2016/css/scroll.html
轉載註明:http://blog.csdn.net/liusaint1992/article/details/51277751