DIV滚动条显示

DIV滚动条显示DIV滚动条所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场1、滚动条常用属性:overflow:auto为自动,scroll为出现滚动条overflow-x:横向滚动条overflow-y:纵向滚动条代码样例:  这里是你要显示的内容,只有需要时才出现滚动条。  这里是你要显示的内容,无论是否需要都出现滚动条。

大家好,又见面了,我是你们的朋友全栈君。

DIV滚动条

 

 

所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场

1、滚动条常用属性:
overflow:auto为自动,scroll为出现滚动条
overflow-x:横向滚动条
overflow-y:纵向滚动条

代码样例:

  
  
  
< div style ="width:260px;height:120px; overflow:auto; border:1px solid;" >
  这里是你要显示的内容,只有需要时才出现滚动条。
</ div >
< div style ="width:260px;height:120px; overflow:scroll; border:1px solid;" >
  这里是你要显示的内容,无论是否需要都出现滚动条。
</ div >
< div style ="width:260px;height:120px; overflow-y:scroll; border:1px solid;" >
  这里是你要显示的内容,只出现Y-纵向滚动条。
</ div >
< div style ="width:260px;height:120px; overflow-x:scroll; border:1px solid;" >
  这里是你要显示的内容,只出现X-横向滚动条。
</ div >

 
2、滚动条相关颜色属性:
scrollbar-face-color:滚动条滑块部分的颜色
scrollbar-highlight-color:滚动条空白部分的颜色
scrollbar-shadow-color:滚动条阴影的颜色
scrollbar-arrow-color:上下按钮三角箭头的颜色
scrollbar-base-color:滚动条的基本颜色
scrollbar-darkshadow-color:滚动条强阴影的颜色
scrollbar-track-color:滚动条滑道颜色

代码样例:

  
  
  
span style="color: #0000ff;">< div style ="overflow:scroll;width:260px;height:120px;
  scrollbar-face-color:#ffffff;
  scrollbar-highlight-color:#ffffff;
  scrollbar-shadow-color:#919192;
  scrollbar-arrow-color:#919192;
  scrollbar-base-color:#900000;
  scrollbar-darkshadow-color:#ffffff;
  scrollbar-track-color:#ffffff;"
>
  这里是你要显示的内容。设置滚动条颜色。
</ div >
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158621.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月13日 上午6:16
下一篇 2022年7月13日 上午6:16


相关推荐

  • HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」

    HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」之前为大家介绍了些许关于HTML5新添加的小东东,想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。

    2022年7月19日
    29
  • VAR模型_trophymanager

    VAR模型_trophymanager本作品采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可。本作品(李兆龙博文,由李兆龙创作),由李兆龙确认,转载请注明版权。文章目录引言PercolatorTiKV中的应用ColumnFamily读放大Latches缺陷总结引言TiKV是GoogleSpanner的一个开源实现,其作为HTAP(HybridTransactionalandAnalyticalProcessing)数据库TiDB的行存储引擎,以支持对OLTP(On-LineTrans

    2026年2月22日
    3
  • html中iframe自适应高度_设置iframe高度自适应

    html中iframe自适应高度_设置iframe高度自适应h5iframe自适应高度外部div:divposition:relative;width:100%;padding-top:calc(100%*720/1280);border:2pxblacksolid;内部iframe:position:absolute;width:100%;height:100%;top:0;<divstyle=”position:relative;width:100%;padding-top:cal

    2022年10月12日
    5
  • 易语言脚本开发入门教程

    易语言脚本开发入门教程天蓝易语言脚本入门开发系列教程第 1 讲初识易语言天蓝易语言脚本入门开发系列教程第 2 课简单控件变量天蓝易语言脚本入门开发系列教程第 3 讲简单登录器制作天蓝易语言脚本入门开发系列教程第 4 讲计算器实现天蓝易语言脚本入门开发系列教程第 5 讲时钟随机数天蓝易语言脚本入门开发系列教程第 6 讲子程序的应用天蓝易语言脚本入门开发系列教程第 7 讲选择夹列表框天蓝易语言脚本入门开发系列教程第 8 讲读写配置项天蓝易语言脚本入门开发系列教程第 9 讲数组天蓝易语言脚本入门开发系列教程第 10 讲分割文本读取帐号密码天蓝易

    2026年3月18日
    2
  • 长虹电视首家接入OpenClaw,打造“养龙虾”养成系AI助手

    长虹电视首家接入OpenClaw,打造“养龙虾”养成系AI助手

    2026年3月16日
    2
  • 怎么给iOS项目打包

    怎么给iOS项目打包

    2022年1月31日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号