脚本宝典收集整理的这篇文章主要介绍了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如何设置超出部分滚动条隐藏的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css如何设置超出部分滚动条隐藏全部内容,希望文章能够帮你解决css如何设置超出部分滚动条隐藏所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。