第一种：使用纯css样式属性隐藏滚动条 ：火狐浏览器的css写法不兼容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>纯css实现隐藏滚动条但鼠标可以滚动的效果</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;border:2px solid orangered;overflow-x: hidden;overflow-y: scroll;}.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */.outContainer::-webkit-scrollbar { width:0 !important; /* remove scrollbar space */background: transparent; /* optional: just make scrollbar invisible */}/* 兼容IE10+ */.outContainer { -ms-overflow-style: none; }/* 但是firefox代码无效 */.outContainer { overflow: -moz-scrollbars-none; }</style>
</head>
<body><div class="outContainer" ><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div>
</body>
</html>
第二种：使用盒子和定位将里层进度条隐藏，里层容器的width多17px，能兼容各个浏览器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;/* border:2px solid orangered; */overflow: hidden;position: relative;}.inContainer {overflow-x:hidden;overflow-y:scroll;position: absolute; /*不能使用relative和fixed定位*/top:0;bottom:0; /*相当于height:100%时的高度*/left: 0;right:-17px; /*图层宽度大于width:100%,滚动条的宽度刚刚好被隐藏 */ }.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}</style></head>
<body><div class="outContainer" ><div class="inContainer"><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div></div></body>
</html>
第三种：使用滚动条插件，如niceScroll.js插件
niceScroll插件的下载和使用：https://mp.csdn.net/postedit/84781490
配置选项 autohidemode：“hidden”
$("#boxscroll").niceScroll({cursorcolor:"#00F",boxzoom:true,autohidemode:'hidden', //选项一直隐藏滚动条});
