浏览器滚动条样式更改

Posted 2020-10-26 Zmmy_W

/* webkit内核浏览器 */

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-button {
width: 8px;
height: 5px;
}

::-webkit-scrollbar-track {
background-color: #ddd;
border-radius: 0px;
}

::-webkit-scrollbar-thumb {
background: #999;
border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
background: #7d7d7d;
}


/* IE浏览器 */

html {
/*滑块和箭头背景颜色*/
scrollbar-base-color: #7d7d7d;
/*背景边框颜色*/
scrollbar-3dlight-color: #7d7d7d;
/*滑块边框颜色*/
scrollbar-highlight-color: #7d7d7d;
/*背景颜色*/
scrollbar-track-color: #EBEBEB;
/*箭头颜色*/
scrollbar-arrow-color: #EBEBEB;
/*滑块阴影*/
scrollbar-shadow-color: #7d7d7d;
/*背景阴影*/
scrollbar-dark-shadow-color: #EBEBEB;
}