CSS设置滚动条样式（兼容IE）

1、这是在webkit浏览器下显示的样式。

           （个人比较喜欢简约点的）

2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法）

下面是代码：

[html] view plain copy

1. <div id='scroll'>  
2.     <div >  
3.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.</p>  
4.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.</p>  
5.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem!</p>  
6.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!</p>  
7.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!</p>  
8.         </div>  
9. </div>  

[css] view plain copy

1. #scroll{  
2.         width:200px;  
3.         height:200px;  
4.         overflow:auto;  
5.         margin-bottom: 20px;  
6.     }  
7.     #scroll div{  
8.             width:400px;  
9.             height:400px;  
10.     }  
11.     #scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/  
12.             width:10px;  
13.             height:10px;  
14.     }  
15.     #scroll::-webkit-scrollbar-button{/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/  
16.             background:#74D334;  
17.     }  
18.     #scroll::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/  
19.             background:#FF66D5;  
20.     }  
21.     #scroll::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/  
22.             background:#FF66D5;  
23.     }  
24.     #scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/  
25.         background:#FFA711;  
26.         border-radius:4px;  
27.     }  
28.     #scroll::-webkit-scrollbar-corner {/*边角（位置6）*/  
29.         background:#82AFFF;   
30.     }  
31.     #scroll::-webkit-scrollbar-resizer  {/*定义右下角拖动块的样式（位置7）*/  
32.         background:#FF0BEE;  
33.     }  
34.     #scroll{  
35.         scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   
36.         scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   
37.         scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   
38.         scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   
39.         scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   
40.         scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   
41.         scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   
42.         scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/   
43.     }  

简约版 (IE样式直接默认就行)

[css] view plain copy

1. #scroll-2{  
2.         width:200px;  
3.         height:200px;  
4.         overflow:auto;  
5.         margin-bottom: 20px;  
6.     }  
7.     #scroll-2 div{  
8.             width:400px;  
9.             height:400px;  
10.     }  
11.     #scroll-2::-webkit-scrollbar{  
12.             width:4px;  
13.             height:4px;  
14.     }  
15.     #scroll-2::-webkit-scrollbar-track{  
16.             background: #E6E6E6;  
17.     }  
18.     #scroll-2::-webkit-scrollbar-thumb{  
19.         background: #747474;  
20.         border-radius:2px;  
21.     }  
22.     #scroll-2::-webkit-scrollbar-corner{  
23.         background: #E6E6E6;  
24.     }  

webkit浏览器滚动条样式设置位置参考如下：

IE浏览器滚动条样式设置位置参考如下图