如何自定义浏览器滚动条样式
自定义浏览器滚动条样式的方法
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}
<div class="wrapper2">
<div class="div2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>table cell</td>
...
</tr>
</tbody>
</table>
</div>
</div>
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;
}
<div class="wrapper2">
<div class="div2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>table cell</td>
...
</tr>
</tbody>
</table>
</div>
</div>
效果：
