这篇文章主要介绍CSS设置超出部分滚动条隐藏的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！方法：1、使用“-WEBkit-scrollbar”属性设置，语法“-webkit-scrollbar{display:
这篇文章主要介绍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 { 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设置超出部分滚动条隐藏的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: css设置超出部分滚动条隐藏的方法
本文链接: https://www.lsjlt.com/news/270543.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
2024-05-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0