CSS自定义滚动条（IE和chrome）

说明

许多浏览器对滚动条的样式是不一样的，比IE下和chrome下就好区别很多，而且它们的代码实现也是不一样的 
下面就实现一下IE下和chrome下的滚动条样式

一、chrome（webkit）下滚动条

主要有下面7个属性:

1.::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 
2.::-webkit-scrollbar-button 滚动条两端的按钮 
3.::-webkit-scrollbar-track 外层轨道 
4.::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） 
5.::-webkit-scrollbar-thumb 拖动条，滑块 
6.::-webkit-scrollbar-corner 边角 
7.::-webkit-resizer 定义右下角拖动块的样式

对应位置

chrome下对三角形设置没有IE完好的

实践代码

::-webkit-scrollbar{
   width:10px;
   background:green;/* 整个滚条背景 */
} 
::-webkit-scrollbar-thumb{
   -webkit-border-radius:4px;
   border-radius:4px;
   background:red; /* 滚条内嵌颜色 */
} 
::-webkit-scrollbar-button {
    background-color:red;/* 两边端按钮颜色 */
}

---

二、IE设置滚动条

IE比较少，都以颜色为主 
1.scrollbar-arrow-color: color; /三角箭头的颜色/ 
2.scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ 
3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ 
4.scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ 
5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ 
6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ 
7.scrollbar-track-color: color; /立体滚动条背景颜色/ 
8.scrollbar-base-color:color; /滚动条的基色/

对应位置

实践代码

<style type="text/css">
    html{  
        scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   
        scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   
        scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   
        scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   
        scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   
        scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   
        scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   
        scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/   
    }  
    </style>

---

如果想在某个div中使用滚动条，只需要给div个id就好， 
webkit形式就如： #scroll::-webkit-scrollbar 
IE形式就如： #scroll{ 
scrollbar-arrow-color: #f4ae21; /*//三角箭头的颜色*/ 
}

---

三、overflow隐藏滚动条

1.去掉横向滚动条：< body style=’overflow:scroll;overflow-x:hidden’> 
2.去掉竖向滚动条：< body style=’overflow:scroll;overflow-y:hidden’> 
3.两个都去掉：< body scroll=”no”> 
4.框架中去滚动条在name=”“后面加 scrolling=”No”