隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）

ゝ一世哀愁。 2021-09-17 04:14 408阅读 0赞

### 第一种：使用纯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][https_mp.csdn.net_postedit_84781490]

配置选项 autohidemode：“hidden”

$("#boxscroll").niceScroll({
          cursorcolor:"#00F",
          boxzoom:true,
          autohidemode:'hidden',  //选项一直隐藏滚动条
        });

[https_mp.csdn.net_postedit_84781490]: https://mp.csdn.net/postedit/84781490