自定义滚动条样式-兼容IE

滚动条样式设置

html部分：

1 <div id="scroll" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
2     <div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">内容部分内容部分</div>
3 </div>

兼容IE的滚动条自定义样式

废话不多说，直接上；

IE专属的滚动条样式定义，只能设置各种原始结构的颜色，宽高结构等其他样式无法修改；

 1 #scroll{
 2     width: 1830px;
 3     height: 750px;
 4     overflow-y: scroll;
 5     /* IE滚动条设置，仅支持颜色修改 */
 6     /* 立体滚动条的颜色（包括箭头部分的背景色） */
 7     scrollbar-face-color: #2c9ef7;
 8     /*三角箭头的颜色*/
 9     scrollbar-arrow-color: #ffffff;
10     /* 立体滚动条亮边的颜色 */
11     /* scrollbar-3dlight-color: #2c9ef7; */
12     /* 滚动条的高亮颜色（左阴影？） */
13     /* scrollbar-highlight-color: #2c9ef7;  */
14     /* 立体滚动条阴影的颜色 */
15     scrollbar-shadow-color: #2c9ef7;
16     /* 立体滚动条外阴影的颜色 */
17     /* scrollbar-darkshadow-color: #2c9ef7; */
18     /* 立体滚动条背景颜色 */
19     /* scrollbar-track-color: #2c9ef7;  */
20     /* 滚动条的基色 */
21     /* scrollbar-base-color: #2c9ef7; */
22 }

webkit内核浏览器的滚动条样式美化：

 1 #scroll div {
 2     width:400px;
 3     height:400px;
 4 }
 5 #scroll::-webkit-scrollbar {
 6     /* ::-webkit-scrollbar 滚动条整体部分，*/
 7     /* 其中的属性有width,height,background,border（就和一个块级元素一样）等。 */
 8     width:60px;
 9     height:10px;
10 }
11 #scroll::-webkit-scrollbar-button{
12     /* ::-webkit-scrollbar-button 滚动条两端的按钮。*/
13     /* 可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果. */
14     background-color:black;
15 }
16 #scroll::-webkit-scrollbar-track{
17     /* ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 */
18     background:blue;
19     display: none;
20 }
21 #scroll::-webkit-scrollbar-track-piece {
22     /* ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分。 */
23     background:green;
24 }
25 #scroll::-webkit-scrollbar-thumb{
26     /* ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分,即滚动条。 */
27     background:pink;
28     border-radius:200px;
29 }
30 #scroll::-webkit-scrollbar-corner {
31     /* ::-webkit-scrollbar-corner 边角. */
32     background:#ddd;
33 }
34 #scroll::-webkit-scrollbar-resizer {
35     /* ::-webkit-resizer 定义右下角拖动块的样式. */
36     background:red;
37 }