摘要:效果样式针对内核滚动条样式参考链接
效果:
样式
/* 针对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
摘要:滚动条两端的按钮。内层轨道,滚动条中间部分除去。有如下功能若是水平滚动条,则属性不起作用,属性用来控制滚动条相应部分竖直方向高度若是竖直滚动条,则属性不起作用,属性用来控制相应部分的宽度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...
摘要:滚动条两端的按钮。内层轨道,滚动条中间部分除去。有如下功能若是水平滚动条,则属性不起作用,属性用来控制滚动条相应部分竖直方向高度若是竖直滚动条,则属性不起作用,属性用来控制相应部分的宽度。 CSS ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } :...
摘要:需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和I...
摘要:可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。 0.需求...
摘要:需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和I...
阅读 2054·2021-11-23 09:51
阅读 2796·2021-11-22 15:35
阅读 2901·2019-08-30 15:53
阅读 996·2019-08-30 14:04
阅读 3238·2019-08-29 12:39
阅读 1731·2019-08-28 17:57
阅读 1018·2019-08-26 13:39
阅读 522·2019-08-26 13:34