当我们的内容超出了我们的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; }
所以还是选第一种吧，简单好用，哈哈