UI设计给的需求是块级元素可以滚动，但是不要显示滚动条，下面三个方法可以实现，记录一下。
计算滚动条宽度然后把滚动条隐藏起来
通过定位把滚动条隐藏起来
<div class="out-container">
<div class="inner-container">
......
</div>
</div>
<style>
.out-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
使用三个容器包起来，不需要计算滚动条的宽度
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
<style>
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
</style>
CSS直接隐藏滚动条
这个方法不适用与IE,对兼容没有强制要求的或做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }
