scrollbar属性、样式详解

1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条)

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

【

overflow:scroll;状态时的滚动条样式设置；ff下貌似无效。

{

scrollbar-face-color:#FFFFFF;/*立体滚动条表面的颜色*/

scrollbar-highlight-color:#fff;/*滚动条空白部分的颜色*/

scrollbar-shadow-color:#808080;/*立体滚动条阴影的颜色*/

scrollbar-arrow-color:#000000; /*上下按钮上三角箭头的颜色*/

scrollbar-track-color:#f9f9f9;/*立体滚动条滚动区的颜色*/

scrollbar-3dlight-color:#C0C0C0;/*立体滚动条亮边的颜色*/

scrollbar-darkshadow-color:#fff;/*立体滚动条暗边的颜色*/

scrollbar-base-color:#333333;/*滚动条的基本颜色*/

}

】

我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

或

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色

scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果：

4.在样式表文件中定义好一个类，调用样式表。

.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}

这样调用：

Scrollbar-Face-Color为滚动条表面颜色设定；

Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；

Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；

Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；

Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。

Scrollbar-Track-Color为滚动条底板颜色设定；

Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例：

body {

background-color: #ffffff;

color: #336699;

SCROLLBAR-FACE-COLOR: #BED8EB;

SCROLLBAR-SHADOW-COLOR: #DDF8FF;

SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1;

SCROLLBAR-3DLIGHT-COLOR: #DDF8FF;

SCROLLBAR-DARKSHADOW-COLOR: #92C0D1;

SCROLLBAR-TRACK-COLOR:#BED8EB;

SCROLLBAR-ARROW-COLOR: #92C0D1

}