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

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

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

第一种：使用纯css样式属性隐藏滚动条 ：火狐浏览器的css写法不兼容

第二种：使用盒子和定位将里层进度条隐藏，里层容器的width多17px，能兼容各个浏览器

第三种：使用滚动条插件，如niceScroll.js插件

猜你喜欢

第一种：使用纯css样式属性隐藏滚动条：火狐浏览器的css写法不兼容