自定义滚动条

第一版 https://bbs.kafan.cn/thread-1529981-1-1.html

/* AGENT_SHEET */
/* 应用于所有情况
@-moz-document url-prefix(chrome://), url-prefix(about:),
url-prefix(file:///), url-prefix(http://), url-prefix(https://){
*/
/* 滚动条背景基本样式 */
scrollbar{
-moz-appearance: none !important;
background-color: transparent !important;/* 滚动条背景透明 */
background-image: none !important; /* 滚动条背景图案不显示 */
position: relative !important; /* 更改滚动条的定位方式为相对 */
overflow: hidden !important;
z-index: 999999999 !important; /* 把滚动条提到Z轴最上层 */
}

/* 滚动条按钮基本样式 */
scrollbar thumb{
-moz-appearance: none !important;
background-color: rgba(0,100,255,.25) !important;
border-radius: 0px !important;
border: 1px !important; /* 滚动条按钮边框 */
border-color: rgba(0,100,255,.1) !important; /* 滚动条按钮边框颜色和透明度 */
}

/* 滚动条按钮:鼠标悬停与点击拖动时基本样式 */
scrollbar:hover thumb,
scrollbar thumb:hover,
scrollbar thumb:active {
background-color: rgba(0,100,255,.75) !important;
border: 0px !important;
}

/* 垂直滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="vertical"]{ margin-left: -5px !important;
min-width: 5px !important; max-width: 5px !important;
}

/* 垂直滚动条按钮的左边框样式 */
scrollbar thumb[orient="vertical"]{
border-style: none none none solid !important;
}

/* 水平滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="horizontal"]{ margin-top: -5px !important;
min-height: 5px !important; max-height: 5px !important;
}

/* 水平滚动条按钮的上边框样式 */
scrollbar thumb[orient="horizontal"]{
border-style: solid none none none !important;
}

/* 去除垂直与水平滚动条相交汇的角落 */
scrollbar scrollcorner{display: none ! important; }

/* 滚动条两端按钮不显示 */
scrollbar scrollbarbutton { display: none ! important; }
/* 滚动条两端按钮，需要先删掉上面一行
scrollbarbutton{ -moz-appearance: none !important;
position: relative !important;
overflow: hidden !important;
background-color: rgba(0,100,255,.25) !important;
border: none !important;
}
scrollbar:hover scrollbarbutton, scrollbar scrollbarbutton:hover{
background-color: rgba(0,100,255,.75) !important;
}
/* 竖滚动条两端按钮的高度
scrollbar[orient="vertical"] scrollbarbutton {
max-height:10px !important; min-height:10px !important;
}
/* 横滚动条两端按钮的宽度
scrollbar[orient="horizontal"] scrollbarbutton {
max-width: 10px !important; min-width: 10px !important;
}

*/

/*
} */

//简易版
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
//IE设置滚动条
scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/
scrollbar-face-color: #333; /**//*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/