自定义浏览器滚动条

webkit内核自定义滚动条样式如下：

1. CSS
2. ::-webkit-scrollbar { /* 1 */ }
3. ::-webkit-scrollbar-button { /* 2 */ }
4. ::-webkit-scrollbar-track { /* 3 */ }
5. ::-webkit-scrollbar-thumb { /* 4 */ }
6. ::-webkit-scrollbar-track-piece { /* 5 */ }
7. ::-webkit-scrollbar-corner { /* 6 */ }
8. ::-webkit-resizer { /* 7 */ }

1::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border。

2::-webkit-scrollbar-button      滚动条两端的按钮。可以用display:none让其不显示

3 ::-webkit-scrollbar-track  外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

4::-webkit-scrollbar-thumb 滚动条滚动部分

5::-webkit-scrollbar-track-piece 内层轨道

6::-webkit-scrollbar-corner 角落部分

7::-webkit-resizer 右下角拖动块（改变大小）的样式

8样式表

.con {
width: 200px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: auto;
}
.con::-webkit-scrollbar {/*整体*/
width:10px;
                height:10px;
}
.con::-webkit-scrollbar-button    {/*顶部按钮*/
                background-color:blue;
            }
            .con::-webkit-scrollbar-track     { /*轨道*/
                background:#FF66D5;
            }
            .con::-webkit-scrollbar-track-piece {/*内侧轨道*/
                background:green;
                }
                .con::-webkit-scrollbar-thumb{/*滚动部分*/
                transition:#FFA711 0.4s ease-in-out;
                background:transparent;
                border-radius:4px;
    }
        .con::-webkit-scrollbar-corner  {/*底部角落*/
            background-color: red
        }
       .con::-webkit-scrollbar-resizer  {/*拖动部分*/
                background:#FF0BEE;
        }
        .con:hover::-webkit-scrollbar-thumb {
        background: #70bdf7;

 }    

FireFox浏览器滚动条

1. @-moz-document url-prefix(http://),url-prefix(https://) {
2. /* 滚动条颜色 */
3. scrollbar {
4. -moz-appearance: none !important;
5. background: rgb(0,255,0) !important;
6. }
7. /* 滚动条按钮颜色 */
8. thumb,scrollbarbutton {
9. -moz-appearance: none !important;
10. background-color: rgb(0,0,255) !important;
11. }
12. /* 鼠标悬停时按钮颜色 */
14. thumb:hover,scrollbarbutton:hover {
15. -moz-appearance: none !important;
16. background-color: rgb(255,0,0) !important;
17. }
18. /* 隐藏上下箭头 */
19. scrollbarbutton {
20. display: none !important;
21. }
22. /* 纵向滚动条宽度 */
23. scrollbar[orient="vertical"] {
24. min-width: 15px !important;
25. }
26. }

借鉴 https://www.lyblog.net/detail/314.html 此处做修改