滑动条样式调整

Posted 2020-08-01

IE：

body {
scrollbar-arrow-color: #45939A; /**//*三角箭头的颜色*/ 
scrollbar-face-color: #45939A; /**//*立体滚动条的颜色*/ 
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ 
scrollbar-highlight-color: #1C3539; /**//*滚动条空白部分的颜色*/ 
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ 
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ 
scrollbar-track-color: #1C3539; /**//*立体滚动条背景颜色*/ 
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/ 
}

 

支持Webkit浏览器

/* 滚动条 */
::-webkit-scrollbar {
width: 15px;
} 
::-webkit-scrollbar-track {
background-color: #1C3539;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
background-color: #32676D;
} /* 滑块颜色 */

::-webkit-scrollbar-button {
background-color: #407F86;
} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
background-color: black;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */