自定义浏览器滚动条样式的方法
1、分别对应滚动条位置。
测试:
.wrapper2 { width: 400px;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-base-color: #1C86EE;
scrollbar-base-color: #1C86EE;
scrollbar-3dlight-color: #1C86EE;
scrollbar-highlight-color: #1C86EE;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #1C86EE;
scrollbar-dark-shadow-color: #1C86EE}
table cell |
2、效果。
body{
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;
}
分别对应滚动条位置
测试:
.wrapper2 {
width: 400px;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-base-color: #1C86EE;
scrollbar-base-color: #1C86EE;
scrollbar-3dlight-color: #1C86EE;
scrollbar-highlight-color: #1C86EE;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #1C86EE;
scrollbar-dark-shadow-color: #1C86EE;
}
table cell |
效果: