原作者地址：https://blog.csdn.net/liusaint1992/article/details/51277751

當(dāng)我們的內(nèi)容超出了我們的div，往往會出現(xiàn)滾動條，影響美觀。

尤其是當(dāng)我們在做一些導(dǎo)航菜單的時候。滾動條一出現(xiàn)就破壞了UI效果。 ?我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動的效果。

這里介紹一個簡單的方法。 ??大體思路是在div外面再套一個div。這個div設(shè)置overflow:hidden。 ?

而內(nèi)容div設(shè)置 overflow-y: scroll;overflow-x: hidden;

然后再設(shè)置外層div的width小于內(nèi)層div的width。

這個內(nèi)層div其實(shí)是會出現(xiàn)滾動條的，所以不影響鼠標(biāo)的滾動效果，而且我們看不到滾動條了。

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;
?? ??? ?}
?? ??? ?.nav_li{
?? ??? ??? ?border: 1px solid #ccc;
?? ??? ??? ?margin: -1px;
?? ??? ??? ?height: 40px;
?? ??? ??? ?line-height: 40px;
?? ??? ??? ?text-align: center;
?? ??? ??? ?font-size: 12px;
?? ??? ??? ?width: 200px;
?? ??? ?}
?? ??? ?.btn_wrap{
?? ??? ??? ?text-align: center;
?? ??? ?}

html代碼：
?? ?<div class= "nav_wrap">
?? ??? ?<ul class= "nav_ul">?? ??? ?
?? ??? ??? ?<li class="nav_li">我是菜單1</li>
?? ??? ??? ?<li class="nav_li">我是菜單2</li>
?? ??? ?</ul>
?? ?</div>

之前的一個項(xiàng)目中的菜單用到了這個技巧。那個項(xiàng)目用了iframe。 也是讓滾動條被遮住了。
今天又順手把目前在做的項(xiàng)目中的導(dǎo)航菜單的滾動條去掉了。 簡單總結(jié)下來。

演示：http://runningls.com/demos/2016/css/scroll.html

總結(jié)

以上是生活随笔為你收集整理的隐藏滚动条，保留鼠标滚动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。