滚动条美化

Posted 2020-10-17 QueenyL

记一次滚动条美化

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*定义滚动条轨道（track）和滑块（thumb）*/
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}
/*定义滚动条顶部（左侧）的按钮块*/
/*::-webkit-scrollbar-button:start 
    width: 10px;
    height: 12px;
}
定义滚动条底部（右侧）的按钮块*!
::-webkit-scrollbar-button:end {
    width: 10px;
    height: 12px;
}
::-webkit-scrollbar-button:start:hover {
    background-color: rgba(255, 255, 255, 1);
}
::-webkit-scrollbar-button:end {
    background-color: rgba(255, 255, 255, 1);
}*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
}
/*定义水平和垂直滚动条两者的交界处（拐角）*/
::-webkit-scrollbar-corner {
    display: block;
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 1);
}