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...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值