试用后放弃，手机上会有问题……
方法一
使用三个容器包围起来，不需要计算滚动条的宽度。
实现代码：
<!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>
方法二
计算滚动条宽度并隐藏起来，使用绝对定位进行隐藏。向右移动了17个像素，刚好等于滚动条的宽度。（各浏览器均没有问题，但是要计算滚动条宽度）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<style>
.outer-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>
<body>
<div class="outer-container">
<div class="inner-container">
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
壮士不留名，留名非壮士。壮士留种不留名！</br>
</div>
</div>
</body>
</html>
方法三
css 隐藏滚动条。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar。（各浏览器均没有问题,但只能作用于html、body标签。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<style>
html {
overflow: -moz-hidden-unscrollable;
height: 100%;
}
body::-webkit-scrollbar {
display: none;//Chorme
}
body {
width: calc(100vw + 18px);//Firefox
height: 100%;//Firefox
-ms-overflow-style: none;//IE
overflow: auto;Firefox
}
</style>
<body>
<div class="outer-container">
<div class="inner-container">
<script>
for(var i=0;i<200;i++)
{ document.write("壮士不留名，留名非壮士。壮士留种不留名！</br>")
}
</script>
</div>
</div>
</body>
</html>
方法四
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }