css如何去隐藏滚动条

隐藏滚动条的方法：首先使用“::-webkit-scrollbar”伪类选择器选中元素的滚动条，然后使用“display:none; ”样式隐藏滚动条即可；具体语法格式“::-webkIT-scrollbar{ display:none; } ”。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

可以使用自定义滚动条的伪对象选择器::-webkit-scrollbar设置隐藏滚动条。

使用此伪类选择器隐藏滚动条css代码：

.element::-webkit-scrollbar {
display:none}
    

如果要兼容 PC 其他浏览器（IE、Firefox 等），可以使用以下方法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

div class="outer-container">
         div class="inner-container">
            div class="content">
                ......        /div>
         /div>
     /div>
    

css代码：

.outer-container,.content {
    	width: 200px;
     	height: 200px;
}
.outer-container {
        position: relative;
        overflow: hidden;
}
.inner-container {
        position: absolute;
         left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
}
 /* for Chrome */.inner-container::-webkit-scrollbar {
        display: none;
}
    

推荐学习：css视频教程

以上就是css如何去隐藏滚动条的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！