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

el09xccxy 发布于2019-08-29 12:39 / 3158人阅读

摘要：效果样式针对内核滚动条样式参考链接

效果：

样式

/* 针对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...

云服务器专线服务自定义html滚动条自定义进度条自定义滚动库滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112051.html

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

摘要：滚动条两端的按钮。内层轨道，滚动条中间部分除去。有如下功能若是水平滚动条，则属性不起作用，属性用来控制滚动条相应部分竖直方向高度若是竖直滚动条，则属性不起作用，属性用来控制相应部分的宽度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...

testbird 2019-08-29 12:17 评论0 收藏0
webkit内核浏览器自定义滚动条样式

摘要：滚动条两端的按钮。内层轨道，滚动条中间部分除去。有如下功能若是水平滚动条，则属性不起作用，属性用来控制滚动条相应部分竖直方向高度若是竖直滚动条，则属性不起作用，属性用来控制相应部分的宽度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...

Achilles 2019-08-01 16:35 评论0 收藏0
如何自定义CSS滚动条的样式？

摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和I...

linkFly 2019-08-02 12:07 评论0 收藏0
如何自定义CSS滚动条的样式？

摘要：可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求...

kviccn 2019-04-23 13:09 评论0 收藏0
如何自定义CSS滚动条的样式？

摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和I...

leonardofed 2019-08-29 17:22 评论0 收藏0