• 技术文章 >web前端 >css教程

    css如何让滚动条不显示

    醉折花枝作酒筹醉折花枝作酒筹2021-06-01 16:22:17原创94

    在css中,可以使用“::-webkit-scrollbar”伪类选择器来选中滚动条,然后使用“display:none”样式不显示滚动条即可;具体语法格式“::-webkit-scrollbar{display:none;}”。

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

    ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式。我们可以设置::-webkit-scrollbar选择器display属性为none来隐藏滚动条。

    设置滚动条不显示的方法:

    <!DOCTYPE html>
    <html>
       <head>
           <meta charset="UTF-8">
           <title></title>
       </head>
       <body>
           <div style=" width:200px;   height: 200px;  overflow-y: scroll;">
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
               cmcc</br>
           </div>
       </body>
    </html>

    效果图:

    设置css效果前:

    F}1%1R@IGCR4(W_FT_1~6D9.png

    添加css样式后:

    代码

    <style>
         ::-webkit-scrollbar {display:none}
    </style>

    使用css设置滚动条不显示效果:

    XMPFLG6EC2_6{5LDY)O1381.png

    css滚动条选择器:

    推荐学习:css视频教程

    以上就是css如何让滚动条不显示的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css如何设置字体 下一篇:兼容ie的css写法有哪些
    第16期线上培训班

    相关文章推荐

    • laravel如何引入css• css布局方法有哪些• css有哪几种样式• css中的“>”是什么意思• css如何设置字体

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网