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如何设置超出部分滚动条隐藏的详细内容，更多请关注其它相关文章！

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