div显示滚动条

div显示滚动条

基本是通过CSS去实现滚动条。
(1)垂直滚动条
设置是否显示滚动条主要是在CSS中设置下列的属性： 

overflow： visible | auto | hidden | scroll
overflow-x：横向滚动条
overflow-y：纵向滚动条

参数的意义： 
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条 
overflow:auto; 这个表示当你内容超过div高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条，可以这么实现：

<div style="overflow:auto;">...</div>

或者

<div style="overflow-y:auto;">...</div>

(2)水平滚动条
如果只想出现水平的滚动条，一般还要配合禁止换行的设置，例如：

<div style="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

(3)滚动条的外观
在IE中，主要是使用各种颜色属性：

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;设置或检索滚动条的拖动区域颜色 

在Chrome中，基本上是使用webkit专用属性设置：

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}

转自
http://hi.baidu.com/jianwen_tian/item/e0d0c52384ffc0e950fd875d