html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」
大家好,又见面了,我是你们的朋友全栈君。
这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。
DIV滚动条属性及样式设置
所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大约是为了节约页面空间,就是所谓的“缩地”了。
当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置DIV滚动条相关的属性。
示例代码:
.testDiv{
border-style:solid;
border-width:50px;
border-color:pink;
position:absolute;
top:200px;
left:300px;
height:200px;
width:300px;
overFlow-x:scroll;
overFlow-y:hidden;
scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
}
注:
1.overFlow:
visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效
scroll总是显示滚动条
hidden没有滚动条,超出区域的内容不可见
auto根据内容自动判断是否添加滚动条
2.DIV滚动条颜色属性:
face-color:滑块颜色
hightlight-color:高亮颜色
3dlight-color:三维光线颜色
darkshadow-color:暗影颜色
shadow-color:阴影颜色
arrow-color:箭头颜色
track-color:滑道颜色
base-color:DIV滚动条的主要颜色,其中包含滚动按钮和滚动滑块
3.overFlow-xoverFlow-y
visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效
scroll总是显示滚动条
hidden没有DIV滚动条,超出区域的内容不可见
auto根据内容自动判断是否添加滚动条
【编辑推荐】
【责任编辑:程华权 TEL:(010)68476606】
点赞 0
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157997.html原文链接:https://javaforall.cn
相关文章
- Android 样式系统 | 常见的主题背景属性
- XSS绕过WAF之on属性
- 前端第二章:8.HTML超链接代码写法;id属性
- 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法
- pthread_create 线程属性-多线程操作 pthread_create pthread_join
- Chrome 102:新增两个 HTML 属性、两个 JS API !
- 【Maven】属性管理
- HTML--全局属性
- 【Android Gradle 插件】PackagingOptions 配置 ③ ( merges 属性配置 | excludes 属性配置 )
- 在HTML中,标记的Size属性最大取值详解编程语言
- 文件Linux 打开 HTML 文件的方法(linux打开html)
- PHP去除html的宽高属性的正则表达式详解编程语言
- JS dataset:获取HTML元素的自定义属性
- 文件Linux查看HTML文件的简单方法(linux查看html)
- HTML <html> 标签
- 深入理解MySQL数据库属性及其应用(mysql数据库属性)
- 优化提升效率:Oracle属性表的优化策略(oracle属性表)
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- HTML连接Oracle利用JavaScript即可实现(html连接oracle)
- MySQL中ZF字段属性详解(mysql zf字段属性)
- jquery学习之二属性(html()与html(val))
- 原生javascript获取元素样式属性值的方法
- 尝试在让script的type属性等于text/html
- jquery日期控件datepicker属性详细解析
- HTML实现title属性换行小技巧