大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这期内容当中小编将会给大家带来有关怎么在css中修改滚动条样式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联总部坐落于成都市区,致力网站建设服务有成都网站制作、成都做网站、外贸营销网站建设、网络营销策划、网页设计、网站维护、公众号搭建、微信小程序、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设,为互联网品牌在互动行销领域创造价值而不懈努力!
CSS设置代码:
*{ scrollbar-face-color:#fff;/*滑块颜色*/ scrollbar-arrow-color:#000; /*箭头颜色*/ scrollbar-shadow-color:#000000; /*滑块边线颜色*/ scrollbar-track-color:#dde3fa; /*滑轨颜色*/ }
此设置对所有滚动条都有作用。
为了兼容其他浏览器还需要做一些功夫。这里针对webkit浏览器做一些设置。同样我们还是有必要先了解其属性:
::-webkit-scrollbar{}/*整体设置*/ ::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。 ::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。 ::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。 ::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分 ::-webkit-scrollbar-corner :边角,两个滚动条交汇处 ::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
使用伪元素设置CSS。
继续添加以下代码
::-webkit-scrollbar{background-color: #000} ::-webkit-scrollbar-track { background-color: #7dc2f6; } ::-webkit-scrollbar-thumb { background-color: #1b99f7; } ::-webkit-scrollbar-button { background-color: #b9e0fd; } ::-webkit-scrollbar-corner { background-color: #018ef8; }
再次测试输出,现在IE和谷哥类浏览器都能看到变化了。
上述就是小编为大家分享的怎么在css中修改滚动条样式了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。