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

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

方法:1、使用“-webkit-scrollbar”属性设置,语法”-webkit-scrollbar{显示:没有;}”;2、在父元素div里设置溢出:“隐藏”样式,并为父元素和子元素设置宽度。

本教程操作环境:windows7多系统,HTML5&和CSS3版,戴尔G3电脑。

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

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title>超出部分隐藏滚动条& lt;/title> 　　& lt;/head> 　　& lt; style 类型=拔谋?css"比; 　　,,,# box  { 　　,,,,,,,宽度:,500 px; 　　,,,,,,,身高:,300 px; 　　,,,,,,,overflow-x:,隐藏; 　　,,,,,,,overflow-y:,滚动; 　　,,,,,,,行高:,30 px; 　　,,,,,,,text-align:,中心; 　　,,,} 　　,,,#箱:-webkit-scrollbar  { 　　,,,,,,,显示:,没有; 　　,,,} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; !——,兼容所有浏览器的超出部分滚动不显示滚动条,——比; 　　,,,& lt; div  id=癰ox"比; 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,& lt;/div> 　　& lt;/body> 　　& lt;/html>

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

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title>超出部分滚动条& lt;/title> 　　& lt;/head> 　　& lt; style 类型=拔谋?css"比; 　　,,,# box  { 　　,,,,,,,/*,父容器设置宽度,,并超出部分不显示,*/,,,,,,,宽度:,500 px; 　　,,,,,,,身高:,300 px; 　　,,,,,,,溢出:,隐藏; 　　,,,} 　　,,,# box 祝辞,div  { 　　,,,,,,,/*,子容器比父容器的宽度多,17,px,,经测正好是滚动条的默认宽度,*/,,,,,,,宽度:,517 px; 　　,,,,,,,身高:,300 px; 　　,,,,,,,行高:,30 px; 　　,,,,,,,text-align:,中心; 　　,,,,,,,overflow-y:,滚动; 　　,,,} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; !——,兼容所有浏览器的超出部分滚动不显示滚动条,——比; 　　,,,& lt; div  id=癰ox"比; 　　,,,,,,,& lt; div> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,,,,,你好,& lt;/br>你好,& lt;/br> 　　,,,,,,,& lt;/div> 　　,,,& lt;/div> 　　& lt;/body> 　　& lt;/html>

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

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