由于某些原因你可能需要隐藏盒子的滚动条但又要它保持滚动效果。
百度找不到答案，谷歌或许你会找到。我就直接提供demo出来，运行代码来看效果吧。
有两种方法：大体思路是加一个外层div使用overflow:hidden对内层div进行遮蔽，而内层根据不同方法把滚动条挤到外层div的遮蔽范围外。
最后加两句js用于更好地支持各大浏览器当中的显示效果。
方法一
内层div使用overflow:auto;padding-right:17px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>隐藏滚动条但不影响滚动-overflow+padding-right | INLOJV</title>
<style type="text/css">
/*
核心在于 外层 overflow:hidden 内层overflow:auto;padding-right:17px,
注意box-sizing 属性不要设置成 border-box
内层的width不合适的话可以单独调整
边框显示是为了方便识别 body、外层、内层边界
*/
*{margin:0;}
#container-outer{
height: 100%;
width: 100%;
border: 2px solid #66FF99;
overflow: hidden;
}
#container-inner{
width: 100%;
height: 99%;
border: 2px solid #0066FF;
overflow: auto;
padding-right: 17px;
}
html, body{
height: 99%;
border: 2px solid #CC0099;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container-outer">
<div id="container-inner">
开始 - inlojv.com<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
到底了<br/>
</div>
<div>
<script>
/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
var parent = document.getElementById('container-outer');
var child = document.getElementById('container-inner');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
</script>
</body>
</html>
方法二
内层div使用position:absolute;right:-17px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>隐藏滚动条但不影响滚动-position+right | INLOJV</title>
<style type="text/css">
/*
核心在于 外层 overflow:hidden;position:relative; 内层 position: absolute;right: -17px;,
内层的width不合适的话可以单独调整
边框显示是为了方便识别 body、外层、内层边界
*/
* {
margin:0;
}
#container-outer {
height: 100%;
width: 100%;
border: 2px solid #66FF99;
overflow: hidden;
position: relative;
}
#container-inner {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: -17px;
border: 2px solid #0066FF;
overflow: auto;
}
html, body {
height: 99%;
border: 2px solid #CC0099;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container-outer">
<div id="container-inner">
开始 - inlojv.com<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
滚动条已隐藏<br/>试着滚动页面<br/><br/>
到底了<br/>
</div>
<div>
<script>
/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
var parent = document.getElementById('container-outer');
var child = document.getElementById('container-inner');
child.style.right = child.clientWidth - child.offsetWidth + "px";
</script>
</body>
</html>