成都网站建设设计

将想法与焦点和您一起共享

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设置超出部分滚动条隐藏的方法
网站链接:http://chengdu.cdxwcx.cn/article/ppsgop.html

其他资讯