纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。  我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。

这里介绍一个简单的方法。   大体思路是在div外面再套一个div。这个div设置overflow:hidden。  

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。

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> 

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. }