當我們的內容超出了我們的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; }
所以還是選第一種吧，簡單好用，哈哈