css滚动条样式美化持续更新中~~~ 2022-03-02 西安 - 一轮大月亮

本文链接：https://blog.csdn.net/qq_42922012/article/details/123232640

直接上干货：



/*1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等*/
/*2. ::-webkit-scrollbar-button 滚动条两端的按钮*/
/*3. ::-webkit-scrollbar-track  外层轨道*/
/*4. ::-webkit-scrollbar-track-piece  内层滚动槽*/
/*5. ::-webkit-scrollbar-thumb 滚动的滑块*/
/*6. ::-webkit-scrollbar-corner 边角*/
/*7. ::-webkit-resizer 定义右下角拖动块的样式 */

/*注意：4 属性 会覆盖 3 属性的值*/

超级干货：


/* 定义滚动条渐增按扭的样式 右下 */
::-webkit-scrollbar-button:end:increment {
    /*background: url(/images/scroll/scroll_cntrl_dwn.png);*/
}

/* 定义滚动条渐减按扭的样式 上左*/
::-webkit-scrollbar-button:start:decrement {
    /*background: url(/images/scroll/scroll_cntrl_up.png);*/
}


/*垂直 上按钮*/
::-webkit-scrollbar-button:vertical:start{
    background: url(/images/scroll/scroll_cntrl_up.png);
}
/*垂直 下按钮*/
::-webkit-scrollbar-button:vertical:end{
    background: url(/images/scroll/scroll_cntrl_dwn.png);
}
/*水平 左按钮*/
::-webkit-scrollbar-button:horizontal:start{
    background: url(/images/tool/top_bkg.png);
}
/*水平 右按钮*/
::-webkit-scrollbar-button:horizontal:end{
    background: url(/images/tool/top_bkg.png);
}


/* 内层滚动槽   蓝色*/
::-webkit-scrollbar-track-piece {
    background-color: blue;
}
/*滚动的滑块 红色滑块*/
::-webkit-scrollbar-thumb {
    background-color: red;
}