修改浏览器默认滚动条样式,兼容IE和谷歌
程序员文章站
2022-06-28 19:00:37
在项目中,很经常会需要修改浏览器滚动条的默认样式,因为浏览器本身的滚动条可能和设计师设计的页面很不搭配,话不多说上代码1、谷歌浏览器写法,webkit内核浏览器::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。::-webkit-scrollbar-tra...
在项目中,很经常会需要修改浏览器滚动条的默认样式,因为浏览器本身的滚动条可能和设计师设计的页面很不搭配,话不多说上代码我饿
1、谷歌浏览器写法,webkit内核浏览器
::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner :边角,两个滚动条交汇处
::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
2、IE浏览器
/* IE 浏览器 */
*{
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:#0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
实际效果
ps:开发刚好遇到这个需求,简单记录一下
本文地址:https://blog.csdn.net/weixin_40297452/article/details/106757323