用css自定义滚动条样式

如果你是一个搞网页前端的，有必要了解一下自定义滚动条样式这个东东。目前支持自定义滚动条样式的有IE浏览器、webkit内核浏览器（chrome）。

IE下的滚动条样式

1、样式规则

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; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
/*以上2项适用与：body、div、textarea、iframe*/

2、Overflow内容溢出时的设置

• overflow 水平及垂直方向内容溢出时的设置
• overflow-x 水平方向内容溢出时的设置
• overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

• visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
• hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
• scroll 无论内容是否超越范围，都将显示滚动条。
• auto 当内容超出范围时，显示滚动条，否则不显示。

3、运用

<!--没有水平滚动条-->
<div style="overflow-x: hidden;">test</div>
<!--没有垂直滚动条-->
<div style="overflow-y: hidden;">test</div>
<!--没有滚动条-->
<div style="overflow: hidden;">test</div>
<!--自动显示滚动条-->
<div style="height: 100px; width: 100px; overflow: auto;">test</div>

4、示例

<div style="border: 1px #9EBFE8 solid; width: 250px; height: 150px; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; overflow-x: hidden;">
<div style="width: 300px; height: 200px;">蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条</div>
</div>
 
<div style="border: 1px #59ADBB solid; width: 250px; height: 150px; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB; overflow-y: hidden;">
<div style="width: 300px; height: 200px;">绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条</div>
</div>
 
<div style="border: 1px #FDDEE8 solid; width: 250px; height: 150px; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0; overflow: hidden;">
<div style="width: 2300px; height: 200px;">浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条</div>
</div>
 
<div style="border: 1px #333333 solid; width: 250px; height: 150px; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC; overflow: auto;">
<div style="width: 300px; height: 200px;">黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条</div>
</div>
 
<div style="border: 1px #d9d9d9 solid; width: 250px; height: 150px; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff;">
<div style="width: 300px; height: 200px;">灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示</div>
</div>

webkit内核下的滚动条样式(chrome)

滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。

1、滚动条的所有伪元素

::-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团队有计划扩展它并推动成为一个标准的伪类)
• ::-webkit-scrollbar-track-piece:start {/*滚动条上半边或左半边*/}
• ::-webkit-scrollbar-thumb:window-inactive {/*当焦点不在当前区域滑块的状态*/}
• ::-webkit-scrollbar-button:horizontal:decrement:hover {/*当鼠标在水平滚动条下面的按钮上的状态*/}

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

2、示例

<style>
::-webkit-scrollbar {
	width:10px;
	margin-right:2px
}
::-webkit-scrollbar:horizontal {
	height:10px;
	margin-bottom:2px
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
    background-color: #333333;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	width:10px;
    border-radius: 5px;
    background: #CBCBCB; 
}
::-webkit-scrollbar-thumb:hover {
	background: #909090; 
}
.test{width: 400px; height: 200px;overflow:auto;}
</style>

 

<div class="test">
<table  width="500" border="0">
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
</table>
</div>