纯css，div隐藏滚动条，保留鼠标滚动效果

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

二、解决方案

大体思路是在div外面再套一个div。

1. 这个div设置overflow:hidden。
2. 内容div设置 overflow-y: scroll;overflow-x: hidden;
3. 然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。

三、显示效果

1. 内层div效果
   
2. 套上外层div效果
   

---

四、代码如下

1. 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;
		}

2. html代码：

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

之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。 也是让滚动条被遮住了。
今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。 简单总结下来。
演示：http://runningls.com/demos/2016/css/scroll.html

---

作者：liusaint1992
来源：优快云
原文：https://blog.youkuaiyun.com/liusaint1992/article/details/51277751
版权声明：本文为博主原创文章，转载请附上博文链接！