浏览器默认滚动条样式
.customScroll ::-webkit-scrollbar-button {
background-image: url(customScrollIcon.png);
}
.customScroll ::-webkit-scrollbar {
width: 17px;
height: 17px;
}
/* 右下三角 */
.customScroll ::-webkit-scrollbar-button:vertical {
background-position: 0 0;
width: 17px;
}
/* 右上三角 */
.customScroll ::-webkit-scrollbar-button:vertical:decrement {
background-position: -18px 0;
width: 17px;
height: 17px;
}
/* 下右三角 */
.customScroll ::-webkit-scrollbar-button:horizontal {
background-position: -18px -18px;
width: 17px;
height: 17px;
}
/* 下左三角 */
.customScroll ::-webkit-scrollbar-button:horizontal:decrement {
background-position: 0 -18px;
width: 17px;
height: 17px;
}
/* 底色 */
.customScroll ::-webkit-scrollbar-track-piece {
background: rgba(241, 241, 241, 1);
}
/* 水平 */
.customScroll ::-webkit-scrollbar-thumb:horizontal {
background: #c1c1c1;
border-top: 2px solid #f1f1f1;
border-bottom: 2px solid #f1f1f1;
}
/* 水平 */
.customScroll ::-webkit-scrollbar-thumb:horizontal:hover {
background: #a8a8a8;
}
/* 垂直 */
.customScroll ::-webkit-scrollbar-thumb:vertical {
background: #c1c1c1;
border-left: 2px solid #f1f1f1;
border-right: 2px solid #f1f1f1;
}
/* 垂直 */
.customScroll ::-webkit-scrollbar-thumb:vertical:hover {
background: #a8a8a8;
}
/* 右下角方块 */
.customScroll ::-webkit-scrollbar-corner {
background: #dcdcdc;
}
customScrollIcon.png
