当前位置: 代码迷 >> Web前端 >> div设立滚动条和滚动条颜色
  详细解决方案

div设立滚动条和滚动条颜色

热度:129   发布时间:2012-09-20 09:36:50.0
div设置滚动条和滚动条颜色

当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置滚动条相关的属性。

<style tyle="text/css">

.testDiv{

?? border-style: solid ;?????

?? border-width: 50px ;????

?? border-color: pink ;

?? position: absolute ; /* 位置 绝对或者相对于最近的一个元素 relative absolute */

?? top:200px ;

?? left:300px ;

?? height:200px ; /* 定义区域的高*/

?? width:300px ;

??

?? /*?? 滚动条 */

??? /*?? overFlow: auto ; */ /* visible :却省的 hidden auto scroll */

????? ?? overFlow-x: scroll ;

?????? overFlow-y: hidden ;?????

??

??? /*?? 滚动条相关的颜色属性 */

???? scrollBar-face-color: green;??????? /* 滑块 */

???? scrollBar-hightLight-color: red;??? /* 高亮 */

???? scrollBar-3dLight-color: orange;??? /* 3维光线 */

???? scrollBar-darkshadow-color:blue;??? /* 暗影??? */

???? scrollBar-shadow-color:yellow;????? /* 阴影?? */

???? scrollBar-arrow-color:purple;?????? /* 箭头 */

???? scrollBar-track-color:black;???????? /* 滑道颜色 */

???? scrollBar-base-color:pink;????????? /* 主要颜色 */

??

??????????

}

</style>

注:

1. overFlow:

visible??? 却省值,没有滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll???? 总是显示滚动条

hidden?? 没有滚动条,超出区域的内容不可见

auto?????? 根据内容自动判断是否添加滚动条

2.滚动条颜色属性:

  face-color:滑块颜色

  hightlight-color:高亮颜色

  3dlight-color:三维光线颜色

  darkshadow-color:暗影颜色

  shadow-color:阴影颜色

  arrow-color:箭头颜色

  track-color:滑道颜色

?????? base-color:滚动条的主要颜色,其中包含滚动按钮和滚动滑块

  相关解决方案