2023年6月20日发(作者：)

HTML滚动条样式代码及使⽤技巧html中滚动条属性设置

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⽴体滚动条阴影的颜⾊

3.设置滚动条属性的⽰例：

（1）让浏览器永远不出现滚动条：

没有⽔平滚动条

没有垂直滚动条

没有滚动条

或

（2）设定多⾏⽂本框的滚动条：

没有⽔平滚动条

没有垂直滚动条

没有滚动条

或

（3）设定窗⼝滚动条的颜⾊：

设置窗⼝滚动条的颜⾊为红⾊

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

加上⼀点特别的效果：

（4）在样式表⽂件中定义好⼀个类，调⽤样式表。

这样调⽤：

Scrollbar-Face-Color为滚动条表⾯颜⾊设定；

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

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

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

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

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

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

举例：

各种滚动属性代码（主要是设置页⾯的⽂字滚动）

普通卷动

滑动

来回卷动

向下卷动

向上卷动

向右卷动
向左卷动

卷动次数

设定卷动距离

滚动条颜⾊设置⽅法介绍

scrollbar-arrow-color: color; /*三⾓箭头的颜⾊*/

scrollbar-face-color: color; /*⽴体滚动条的颜⾊（包括箭头部分的背景⾊）*/

scrollbar-3dlight-color: color; /*⽴体滚动条亮边的颜⾊*/

scrollbar-highlight-color: color; /*滚动条的⾼亮颜⾊（左阴影？）*/

scrollbar-shadow-color: color; /*⽴体滚动条阴影的颜⾊*/

scrollbar-darkshadow-color: color; /*⽴体滚动条外阴影的颜⾊*/

scrollbar-track-color: color; /*⽴体滚动条背景颜⾊*/

scrollbar-base-color: color; /*滚动条的基⾊*/

webkit不再是⽤简单的⼏个CSS属性，⽽是⼀坨的CSS伪元素：

-webkit-scrollbar 滚动条整体部分

-webkit-scrollbar-button 滚动条两端的按钮

-webkit-scrollbar-track 外层轨道

-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

-webkit-scrollbar-thumb （拖动条？滑块？滚动条⾥⾯可以拖动的那个，肿么翻译好呢？意会就好）

-webkit-scrollbar-corner 边⾓

-webkit-resizer 定义右下⾓拖动块的样式

通过这些伪元素，可以完全的重写⼀个⽹站的滚动条样式。

当然webkit提供的不⽌这些，还有很多伪类，可以更丰富滚动条样式：

:horizontal – horizontal伪类应⽤于⽔平⽅向的滚动条

:vertical – vertical伪类应⽤于竖直⽅向的滚动条

:decrement – decrement伪类应⽤于按钮和内层轨道（track piece）。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置（⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。）

:increment – increment伪类和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置（⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。）

:start – start伪类也应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。

:end – 类似于start伪类，标识对象是否放到滑块的后⾯。

:double-button – 该伪类以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。

:single-button – 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀段。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。

:no-button – ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。

:corner-present – ⽤于所有滚动条轨道，指⽰滚动条圆⾓是否显⽰。

:window-inactive – ⽤于所有的滚动条轨道，指⽰应⽤滚动条的某个页⾯容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以⽤于：：selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类）

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以⽤于滚动条中。

滚动条的使⽤技巧：

(1)隐藏滚动条

(2)如何在单元格或图层中出现滚动条

(3)javascript改变框架中滚动条的样式，⽐如改变颜⾊、改为平⾯效果等

说明：

scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜⾊；

scrollbar-highlight-color:color;设置或检索滚动条3D界⾯的亮边颜⾊；

scrollbar-face-color:color;设置或检索滚动条3D表⾯的颜⾊；

scrollbar-arrow-color:color;设置或检索滚动条⽅向箭头的颜⾊；当滚动条出现但不可⽤时，此属性失效；

scrollbar-shadow-color:color;设置或检索滚动条3D界⾯的暗边颜⾊；

scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜⾊；

scrollbar-base-color:color;设置或检索滚动条基准颜⾊。其它界⾯颜⾊将据此⾃动调整。

scrollbar-track-color:color;设置或检索滚动条的拖动区域颜⾊

备注：

color为你要设置的颜⾊代码，可以是16进制的，⽐如#FF0000，可以是以RGB表⽰的，⽐如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都⽤上才会⽣效。

(4)javascript中的页⾯元素定位

clientX、clientY是⿏标当前相对于⽹页的位置，当⿏标位于页⾯左上⾓时clientX=0, clientY=0；

offsetX、offsetY是⿏标当前相对于⽹页中的某⼀区域的位置，当⿏标位于页⾯中这⼀区域的左上⾓时offsetX=0, offsetY=0；

screenX、screenY是⿏标相对于⽤户整个屏幕的位置；

x、y是⿏标当前相对于当前浏览器的位置

scrollLeft：设置或获取位于对象左边界和窗⼝中⽬前可见内容的最左端之间的距离（因为有滚动条的产⽣，所以⽬前页⾯可见内容是不定的）。

scrollTop：设置或获取位于对象最顶端和窗⼝中可见内容的最顶端之间的距离。

left：对象相对于页⾯的X坐标。

top：对象相对于页⾯的Y坐标

(5)屏蔽选择,右键等

2023年6月20日发(作者：)

HTML滚动条样式代码及使⽤技巧html中滚动条属性设置

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⽴体滚动条阴影的颜⾊

3.设置滚动条属性的⽰例：

（1）让浏览器永远不出现滚动条：

没有⽔平滚动条

没有垂直滚动条

没有滚动条

或

（2）设定多⾏⽂本框的滚动条：

没有⽔平滚动条

没有垂直滚动条

没有滚动条

或

（3）设定窗⼝滚动条的颜⾊：

设置窗⼝滚动条的颜⾊为红⾊

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

加上⼀点特别的效果：

（4）在样式表⽂件中定义好⼀个类，调⽤样式表。

这样调⽤：

Scrollbar-Face-Color为滚动条表⾯颜⾊设定；

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

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

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

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

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

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

举例：

各种滚动属性代码（主要是设置页⾯的⽂字滚动）

普通卷动

滑动

来回卷动

向下卷动

向上卷动

向右卷动
向左卷动

卷动次数

设定卷动距离

滚动条颜⾊设置⽅法介绍

scrollbar-arrow-color: color; /*三⾓箭头的颜⾊*/

scrollbar-face-color: color; /*⽴体滚动条的颜⾊（包括箭头部分的背景⾊）*/

scrollbar-3dlight-color: color; /*⽴体滚动条亮边的颜⾊*/

scrollbar-highlight-color: color; /*滚动条的⾼亮颜⾊（左阴影？）*/

scrollbar-shadow-color: color; /*⽴体滚动条阴影的颜⾊*/

scrollbar-darkshadow-color: color; /*⽴体滚动条外阴影的颜⾊*/

scrollbar-track-color: color; /*⽴体滚动条背景颜⾊*/

scrollbar-base-color: color; /*滚动条的基⾊*/

webkit不再是⽤简单的⼏个CSS属性，⽽是⼀坨的CSS伪元素：

-webkit-scrollbar 滚动条整体部分

-webkit-scrollbar-button 滚动条两端的按钮

-webkit-scrollbar-track 外层轨道

-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

-webkit-scrollbar-thumb （拖动条？滑块？滚动条⾥⾯可以拖动的那个，肿么翻译好呢？意会就好）

-webkit-scrollbar-corner 边⾓

-webkit-resizer 定义右下⾓拖动块的样式

通过这些伪元素，可以完全的重写⼀个⽹站的滚动条样式。

当然webkit提供的不⽌这些，还有很多伪类，可以更丰富滚动条样式：

:horizontal – horizontal伪类应⽤于⽔平⽅向的滚动条

:vertical – vertical伪类应⽤于竖直⽅向的滚动条

:decrement – decrement伪类应⽤于按钮和内层轨道（track piece）。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置（⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。）

:increment – increment伪类和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置（⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。）

:start – start伪类也应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。

:end – 类似于start伪类，标识对象是否放到滑块的后⾯。

:double-button – 该伪类以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。

:single-button – 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀段。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。

:no-button – ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。

:corner-present – ⽤于所有滚动条轨道，指⽰滚动条圆⾓是否显⽰。

:window-inactive – ⽤于所有的滚动条轨道，指⽰应⽤滚动条的某个页⾯容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以⽤于：：selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类）

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以⽤于滚动条中。

滚动条的使⽤技巧：

(1)隐藏滚动条

(2)如何在单元格或图层中出现滚动条

(3)javascript改变框架中滚动条的样式，⽐如改变颜⾊、改为平⾯效果等

说明：

scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜⾊；

scrollbar-highlight-color:color;设置或检索滚动条3D界⾯的亮边颜⾊；

scrollbar-face-color:color;设置或检索滚动条3D表⾯的颜⾊；

scrollbar-arrow-color:color;设置或检索滚动条⽅向箭头的颜⾊；当滚动条出现但不可⽤时，此属性失效；

scrollbar-shadow-color:color;设置或检索滚动条3D界⾯的暗边颜⾊；

scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜⾊；

scrollbar-base-color:color;设置或检索滚动条基准颜⾊。其它界⾯颜⾊将据此⾃动调整。

scrollbar-track-color:color;设置或检索滚动条的拖动区域颜⾊

备注：

color为你要设置的颜⾊代码，可以是16进制的，⽐如#FF0000，可以是以RGB表⽰的，⽐如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都⽤上才会⽣效。

(4)javascript中的页⾯元素定位

clientX、clientY是⿏标当前相对于⽹页的位置，当⿏标位于页⾯左上⾓时clientX=0, clientY=0；

offsetX、offsetY是⿏标当前相对于⽹页中的某⼀区域的位置，当⿏标位于页⾯中这⼀区域的左上⾓时offsetX=0, offsetY=0；

screenX、screenY是⿏标相对于⽤户整个屏幕的位置；

x、y是⿏标当前相对于当前浏览器的位置

scrollLeft：设置或获取位于对象左边界和窗⼝中⽬前可见内容的最左端之间的距离（因为有滚动条的产⽣，所以⽬前页⾯可见内容是不定的）。

scrollTop：设置或获取位于对象最顶端和窗⼝中可见内容的最顶端之间的距离。

left：对象相对于页⾯的X坐标。

top：对象相对于页⾯的Y坐标

(5)屏蔽选择,右键等