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>实现效果：
