CSS隐藏滚动条并可以滚动内容

前言：当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。我们不希望出现滚动条，也不希望超出去的内容溢出，就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，下面一起看看实现的方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>
		.element, .outer-container {
		 width: 350px;
		 height: 200px;
		}
		 
		.outer-container {
		 position: relative;
		 overflow: hidden;
		}
		 
		.inner-container {
		 position: absolute;
		 overflow-y: scroll;
		}
		 
		
  </style>
  <body>
	   <div class="outer-container">
		 <div class="inner-container">
		 <div class="element">
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
		 </div>
			</div>
		 </div>
	 </div>
  </body>
</html>