纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题

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

　　这里介绍一个简单的方法：大体思路是在div外面再套一个div。这个div设置overflow:hidden，而内容div设置 overflow-y: scroll;overflow-x: hidden;

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

　　这个内层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;
}

//html代码
<div class= "nav_wrap">
    <ul class= "nav_ul">        
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
    </ul>
</div>

　　这样的好处是兼容所有浏览器。

　　下面介绍对各种浏览器进行的scroll-bar设置，这种就是兼容性不大好，对火狐不起作用

/*webkit内核*/
.scroll_content::-webkit-scrollbar {
    width:0px;
    height:0px;
}
.scroll_content::-webkit-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
/*o内核*/
.scroll_content .-o-scrollbar{
    -moz-appearance: none !important;   
    background: rgba(0,255,0,0) !important;  
}
.scroll_content::-o-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scroll_content{
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}

　　所以还是选第一种吧，简单好用，哈哈