css隐藏滚动条又可以滚动(亲测有效)
前几天因为隐藏滚动条又得能滚动这个功能搜了挺长时间,本来就用的iframe,两个滚动条真的丑爆了!后来看好多帖子再加上帖子下面的回帖各种试才整出来,今天又整理了一下,先写上省得自己下次又忘了
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.outside_box{
width: 100px;
height: 100px;
border: 1px solid red;
overflow-x: hidden;
overflow-y: auto;
/*IE下隐藏滚动条*/
-ms-overflow-style:none;
/*火狐下隐藏滚动条*/
scrollbar-width: none;
}
/*谷歌, 苹果,欧朋下隐藏滚动条*/
.outside_box::-webkit-scrollbar {display:none}
.inside_box{
width: 100px;
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
</style>
</head>
<body>
<!-- 为了设置滚动,把外面的div设置100*100,里面的设置100*200并加上渐变的背景颜色 ,方便演示-->
<div class="outside_box">
<div class="inside_box"></div>
</div>
</body>
</html>
如果上面的一段觉得太繁琐,就只看以下三行就好
IE下隐藏滚动条:-ms-overflow-style:none;
火狐下隐藏滚动条: scrollbar-width: none;
谷歌, 苹果,欧朋下隐藏滚动条: element::-webkit-scrollbar {display:none}