css div隐藏滾動條，保留滑鼠滾動效果。

當我們的内容超出了我們的div，往往會出現滾動條，影響美觀。

尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條，也不希望超出去的内容被放逐，就要保留滑鼠滾動的效果。

這裡介紹一個簡單的方法。 大體思路是在div外面再套一個div。這個div設定overflow:hidden。

而内容div設定 overflow-y: scroll;overflow-x: hidden;

然後再設定外層div的width小于内層div的width。

這個内層div其實是會出現滾動條的，是以不影響滑鼠的滾動效果，而且我們看不到滾動條了。

内層div效果：

套上外層div效果後：

css代碼：

1.  .nav_wrap{  
2.  height: 400px;  
3.  width: 200px;  
4.  overflow: hidden;  
5.  border: 1px solid #ccc;  
6.  margin: 20px auto;  
7.  }  
8.  .nav_ul{  
9.  height: 100%;  
10.  width: 220px;  
11.  overflow-y: auto;  
12.  overflow-x: hidden;  
13.  }  
14.  .nav_li{  
15.  border: 1px solid #ccc;  
16.  margin: -1px;  
17.  height: 40px;  
18.  line-height: 40px;  
19.  text-align: center;  
20.  font-size: 12px;  
21.  width: 200px;  
22.  }  
23.  .btn_wrap{  
24.  text-align: center;  
25.  }        

html代碼：

1.  <div class= "nav_wrap">  
2.  <ul class= "nav_ul">        
3.  <li class="nav_li">我是菜單1</li>  
4.  <li class="nav_li">我是菜單2</li>  
5.  </ul>  
6.  </div>