CSS3自定义滚动条样式方法

该代码收集于网上资源,非原创

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/       ::-webkit-scrollbar {           width: 10px;           /*对垂直流动条有效*/           height: 10px;           /*对水平流动条有效*/       }         /*定义滚动条的轨道颜色、内阴影及圆角*/       ::-webkit-scrollbar-track {           -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);           background-color: rosybrown;           border-radius: 3px;       }         /*定义滑块颜色、内阴影及圆角*/       ::-webkit-scrollbar-thumb {           border-radius: 7px;           -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);           background-color: #da4744;       }         /*定义两端按钮的样式*/       ::-webkit-scrollbar-button {           background-color: #da4744;       }         /*定义右下角汇合处的样式*/       ::-webkit-scrollbar-corner {           background: da4744;       }         ::-webkit-scrollbar-track-piece {           background-color: #e64747;       }