资讯专栏INFORMATION COLUMN

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

el09xccxy / 3237人阅读

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

效果:

样式

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

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

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

相关文章

  • webkit内核览器定义滚动样式

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

    testbird 评论0 收藏0
  • webkit内核览器定义滚动样式

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

    Achilles 评论0 收藏0
  • 如何定义CSS滚动的样式?

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

    linkFly 评论0 收藏0
  • 如何定义CSS滚动的样式?

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

    kviccn 评论0 收藏0
  • 如何定义CSS滚动的样式?

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

    leonardofed 评论0 收藏0

发表评论

0条评论

el09xccxy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<