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

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

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

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

<!DOCTY PE  html>
<html>
<head>
    < ;m eta charset="UTF-8">
    <title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
     # box {
        width: 500px;
        h ei ght: 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如何设置超出部分滚动条隐藏的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的 css如何设置超出部分滚动条隐藏全部内容，希望文章能够帮你解决 css如何设置超出部分滚动条隐藏所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css如何设置超出部分滚动条隐藏的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199624

更新时间：2023-04-27 阅读：30次