经常写页面的同学都知道,浏览器一般自带的滚动条样式很丑,和页面风格格格不入,于是就想着是否能够改变原有滚动条样式?但实际中,其他浏览器又和IE浏览器不一样,导致兼容性不好。
chrome浏览器滚动条自定义样式修改:
div{
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #134187;
/*滚动条整体颜色*/
scrollbar-highlight-color: #134187;
/*滚动条轨道颜色*/
scrollbar-track-color: #011433;
}
/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
background-color: #011433;
width:10px;
height:10px;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
background-color: #011433;
border-radius: 10px;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #134087;
}
IE浏览器滚动条自定义样式修改:
在写样式之前,我们看一下IE浏览器滚动条样式设置位置参考图:
样式修改代码:
//Ie下滚动条样式
HTML {
scrollbar-base-color: #134087;
//scrollbar-base-color: #134087;
scrollbar-3dlight-color:#134087;
scrollbar-highlight-color: #134087;
scrollbar-track-color: #011433;
scrollbar-arrow-color: #011433;
scrollbar-shadow-color:#011433;
//scrollbar-dark-shadow-color: #011433;
}