第一种:使用纯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', //选项一直隐藏滚动条
});