webkit内核浏览器自定义滚动条

效果:
图片描述

样式

/* 针对webkit内核滚动条样式*/
.zh-fd-scrollbar::-webkit-scrollbar{width: 10px;height: 10px;background-color: #3D3D46;}
.zh-fd-scrollbar::-webkit-scrollbar-thumb{border-radius: 8px;background-color: #505662;}
.zh-fd-scrollbar::-webkit-scrollbar-thumb:hover{background-color: #5D626C;}
.zh-fd-scrollbar::-webkit-scrollbar-button{width: 8px;height: 8px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:horizontal:start{background: url(../images/bg-group-flight-dynamic.png) no-repeat 0 -120px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:horizontal:end{background: url(../images/bg-group-flight-dynamic.png) no-repeat 3px -129px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:vertical:decrement{background: url(../images/bg-group-flight-dynamic.png) no-repeat 1px -140px;}
.zh-fd-scrollbar::-webkit-scrollbar-button:vertical:increment{background: url(../images/bg-group-flight-dynamic.png) no-repeat 1px -148px;}
.zh-fd-scrollbar::-webkit-scrollbar-corner{background-color: #3D3D46;}

参考链接:https://webkit.org/blog/363/s...

你可能感兴趣的:(css,scrollbar)