本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
方法:1、使用“-webkit-scrollbar”属性设置,语法“-webkit-scrollbar{display:none;}”;2、在父元素div里设置“overflow: hidden”样式,并为父元素和子元素设置宽度。

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
方法一、 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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 >
|
方法二、利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式
阅读剩余部分
相关阅读 >>
详解css行高line-height属性
怎样在外连接css文件
jquery怎么操作css设置颜色
css如何使用精灵图
css阴影边框怎么设置
css中如何使颜色透明度
css布局方法有哪些
css如何解决不同浏览器下文本兼容的问题
css中怎么把文字加粗
css中width什么意思
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何设置超出部分滚动条隐藏