css设置超出部分滚动条隐藏的方法

这篇文章主要介绍css设置超出部分滚动条隐藏的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联是一家专注于网站制作、成都网站制作与策划设计,修武网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:修武等地区。修武做网站价格咨询:18980820575

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

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

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




    
    超出部分隐藏滚动条


    #box {
        width: 500px;
        height: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
    }
    #box::-webkit-scrollbar {
        display: none;
    }


    
    
        你好 
你好 

        你好 
你好 

        你好 
你好 

        你好 
你好 

        你好 
你好 

        你好 
你好 

        你好 
你好

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




    
    超出部分滚动条


    #box {
        /* 父容器设置宽度, 并超出部分不显示 */
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    #box > div {
        /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
        width: 517px;
        height: 300px;
        line-height: 30px;
        text-align: center;
        overflow-y: scroll;
    }


    
    
        
            你好 
你好 

            你好 
你好 

            你好 
你好 

            你好 
你好 

            你好 
你好 

            你好 
你好 

            你好 
你好

以上是“css设置超出部分滚动条隐藏的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站建设知识

css设置超出部分滚动条隐藏的方法

其他资讯