div添加滚动条常见属性

由于页面上的表里的末一列的内容太多，显示的内容不美观了，就想在这一列上加滚动条，在网上搜了一下，用div可以实现，感觉还不错，下面的是在网上查到的。
 
想在div里添加滚动条设置一下style就ok了
 
  方位属性：
  width:限制div区域的宽
  height:限制div区域的高;
  top：元素的顶边相对于容器的顶边的偏移
  left：元素的左边相对于容器的右边的偏移
  right:元素的右边相对于容器的右边的偏移
  bottom：元素的底边相对于容器的底边的偏移
  z-index：div层位置，div必须是浮动的，值越大div越靠前，数值可以不连续
  滚动条属性：
  overflow-x:水平滚动条
  overflow-y:垂直滚动条
  overflow:水平和垂直滚动条
  值：
  visible 却省值，没有滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
  scroll 总是显示滚动条
  hidden 没有滚动条，超出区域的内容不可见
  auto 根据内容自动判断是否添加滚动条
  颜色属性：
  scrollbar-3dlight-color立体滚动条亮边的颜色
  scrollbar-arrow-color上下按钮上三角箭头的颜色
  scrollbar-base-color滚动条的基本颜色
  scrollbar-darkshadow-color立体滚动条强阴影的颜色
  scrollbar-face-color立体滚动条凸出部分的颜色
  scrollbar-highlight-color滚动条空白部分的颜色
  scrollbar-shadow-color立体滚动条阴影的颜色
  scrollbar-track-color滑道颜色

详解：

IE浏览器中自定义滚动条样式：
HTML {  
scrollbar-base-color: #C0C0C0;  
scrollbar-base-color: #C0C0C0;  
scrollbar-3dlight-color: #C0C0C0;  
scrollbar-highlight-color: #C0C0C0;  
scrollbar-track-color: #EBEBEB;  
scrollbar-arrow-color: black;  
scrollbar-shadow-color: #C0C0C0;  
scrollbar-dark-shadow-color: #C0C0C0;  
} 
解释：
介绍一下涉及浏览器滚动条的样式表内容（某些样式需ie5.5+才能支持）：
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立体滚动条阴影的颜色

CHROME浏览器中自定义滚动条样式：
::-webkit-scrollbar { width: 3px; height: 3px;}  
::-webkit-scrollbar-track-piece { background-color: #ffffff;}  
::-webkit-scrollbar-thumb{height: 50px; background-color: #666; -webkit-border-radius: 3px;} 
解释：
::-webkit-scrollbar 滚动条宽跟高
::-webkit-scrollbar-track-piece 滚动条样式底部内层样式
::-webkit-scrollbar-thumb 滚动条滑块样式
-webkit-border-radius: 滚动条滑块边角–导圆角

FireFox下自定义滚动条：(或许有些问题，参考http://g.mozest.com/thread-38113-1-1)
@-moz-document url-prefix(http://),url-prefix(https://) {  
/* 滚动条颜色 */ 
scrollbar {  
   -moz-appearance: none !important;  
   background: rgb(0,255,0) !important;  
}  
/* 滚动条按钮颜色 */ 
thumb,scrollbarbutton {  
   -moz-appearance: none !important;  
   background-color: rgb(0,0,255) !important;  
}  
/* 鼠标悬停时按钮颜色 */ 
 
thumb:hover,scrollbarbutton:hover {  
   -moz-appearance: none !important;  
   background-color: rgb(255,0,0) !important;  
}  
/* 隐藏上下箭头 */ 
scrollbarbutton {  
   display: none !important;  
}  
/* 纵向滚动条宽度 */ 
scrollbar[orient="vertical"] {  
  min-width: 15px !important;  
}  
} 
FF下用JS实现自定义滚动条：

JS
< script type=“text/javascript” src=“JQUERY-1.1.3.1.js”></script>   
< script type=“text/javascript” src=“jquery.linscroll.js“></script>   
< script type=“text/javascript”>   
$(document).ready(   
function(){   
$(’#scrollContent’).setScroll( //scrollContent为滚动层的ID
{img:scroll_bk.gif’,width:10},//背景图及其宽度   
{img:scroll_arrow_up.gif’,height:3},//up image   
{img:scroll_arrow_down.gif’,height:3},//down image   
{img:scroll_bar.gif’,height:25}//bar image   
);});     
< /script> 
HTML
< div id=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>内容</div>