html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。DIV滚动条属性及样式设置所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当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.net/157997.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java中无法解析为类型_java无法解析导入的包

    java中无法解析为类型_java无法解析导入的包1、了解.odt文件.odt文件是openoffice软件产生的文档格式,可以直接用office打开,这其实就是一个压缩包,可以使用解压软件打开,里面有一个content.xml文件,这个文件内有<text:p>标签,标签内就是展示出来的内容。2、解压文件上面说了.odt文件就是一个压缩包,所以可以直接用解压缩包的方式解压,/***@paramfilePath源文件路径*/publicvoidparseFile(Stringfi…

    2025年9月3日
    5
  • 如何让css文字垂直居中(上)

    如何让css文字垂直居中(上)其实可以很容易地实现 CSS 文字的水平居中 但是有时候我们需要将文字垂直居中 除了表格实现这种 CSS 文字的垂直居中之外 还有很多其他的方式注意 下面的 demo 只适用于现代浏览器 不兼容 IE 的低版本和其他非主流浏览器 实现 css 文字垂直居中的 8 种方法如下 1 使用绝对定位和负外边距对块级元素进行垂直居中 css 垂直居中效果 css 垂直居中实现代码 这个方法兼容性不错 但是有一个小缺点 必须提前知道被居中块级元素的尺寸 否则无法准确实现垂直居中 2 使用绝对定位和 transform 代码如下

    2025年7月7日
    1
  • 版本过低怎么升级_手机版本出现问题怎么办

    版本过低怎么升级_手机版本出现问题怎么办昨天心血来潮更新了下Eclipse下的SDK,但是由于网速、时间等原因,没有全部更新完。1、打开Eclipse的时候,提示ThisAndroidSDKrequiresAndroidDeveloperToolkitversion23.0.0orabove.Currentversionis22.6.2.v201403212031-1085508.Pleaseup

    2025年6月29日
    4
  • Redis 设置密码登录

    Redis 设置密码登录

    2021年10月27日
    56
  • acwing292. 炮兵阵地(状态压缩dp+滚动数组)[通俗易懂]

    acwing292. 炮兵阵地(状态压缩dp+滚动数组)[通俗易懂]司令部的将军们打算在 N×M 的网格地图上部署他们的炮兵部队。一个 N×M 的地图由 N 行 M 列组成,地图的每一格可能是山地(用 H 表示),也可能是平原(用 P 表示),如下图。在每一格平原地形上最多可以布置一支炮兵部队(山地上不能够部署炮兵部队);一支炮兵部队在地图上的攻击范围如图中黑色区域所示:如果在地图中的灰色所标识的平原上部署一支炮兵部队,则图中的黑色的网格表示它能够攻击到的区域:沿横向左右各两格,沿纵向上下各两格。图上其它白色网格均攻击不到。从图上可见炮兵的攻击范围不受地形的影响

    2022年8月9日
    9
  • 视频一键识别生成字幕

    视频一键识别生成字幕前不久我介绍了通过视频生成字幕的技术原理(博客、B站),我现在把这个功能打包成一个易于操作的界面,如下图所属:操作非常的简单,打开程序后,点击上面【打开要识别的视频按钮】,就会弹出下图的打开文件对话框,选择需要生成字幕的视频:稍等片刻,待程序识别并生成完成后就弹出如下保存对话框,填写要保存的字幕文件名就可以了:最后生成类似如下的文件就可以在你的视频编辑软件中进行合并了。软件下载…

    2022年6月8日
    23

发表回复

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

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