css如何设置超出部分滚动条隐藏-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

css如何设置超出部分滚动条隐藏

方法：1、使用“-webkit-scrollbar”属性设置，语法“-webkit-scrollbar{display:none;}”；2、在父元素div里设置“overflow: hidden”样式，并为父元素和子元素设置宽度。

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

方法一、利用 CSS 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>超出部分隐藏滚动条</title></head><style type="text/css">    #box {        width: 500px;        height: 300px;        overflow-x: hidden;        overflow-y: scroll;        line-height: 30px;        text-align: center;    }    #box::-webkit-scrollbar {        display: none;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div id="box">        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>    </div></body></html>

登录后复制

方法二、利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>超出部分滚动条</title></head><style type="text/css">    #box {        /* 父容器设置宽度, 并超出部分不显示 */        width: 500px;        height: 300px;        overflow: hidden;    }    #box > div {        /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */        width: 517px;        height: 300px;        line-height: 30px;        text-align: center;        overflow-y: scroll;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div id="box">        <div>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>        </div>    </div></body></html>

登录后复制

推荐学习：css视频教程

以上就是css如何设置超出部分滚动条隐藏的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~