纯css，div隐藏滚动条，保留⿏标滚动效果。
当我们的内容超出了我们的div，往往会出现滚动条，影响美观。
尤其是当我们在做⼀些导航菜单的时候。滚动条⼀出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留⿏标滚动的效果。
这⾥介绍⼀个简单的⽅法。⼤体思路是在div外⾯再套⼀个div。这个div设置overflow:hidden。
⽽内容div设置 overflow-y: scroll;overflow-x: hidden;
然后再设置外层div的width⼩于内层div的width。
这个内层div其实是会出现滚动条的，所以不影响⿏标的滚动效果，⽽且我们看不到滚动条了。
内层div效果：
套上外层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;
}
.nav_li{
border: 1px solid #ccc;
margin: -1px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
width: 200px;
}
.btn_wrap{
html滚动效果代码
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>
之前的⼀个项⽬中的菜单⽤到了这个技巧。那个项⽬⽤了iframe。也是让滚动条被遮住了。另⼀个实⽤的⽅法：
.nav_wrap::-webkit-scrollbar {
display: none;/*隐藏滚轮*/
}
今天⼜顺⼿把⽬前在做的项⽬中的导航菜单的滚动条去掉了。简单总结下来。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。