1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > CSS 滚动条样式【兼容chrome Firefox IE】

CSS 滚动条样式【兼容chrome Firefox IE】

时间:2021-06-20 01:02:08

相关推荐

CSS 滚动条样式【兼容chrome Firefox IE】

css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome、Firefox、IE5.5+三大浏览器的改写方法。

Chrome:

原理:通过-webkit相关属性直接可以灵活控制滚动条样式。

::-webkit-scrollbar { /* 滚动条宽 */width: 6px;height: 4px;}::-webkit-scrollbar-thumb { /* 滚动条 拖动条 */background-color: rgba(0,0,0,.2);border-radius: 6px;}::-webkit-scrollbar-track { /* 滚动条背景槽 */background-color: #eee;border-radius: 6px;}

Firefox:

原理:写在overflow-y同级的位置,将滚动条置为透明,以此规避丑丑的滚动条样式。

overflow-y: auto;scrollbar-color: transparent transparent;

IE:

原理:写在overflow-y同级的位置,由于在ie下transparent无效,故将滚动条置为页面背景色,以此规避丑丑的滚动条样式。

这几个属性文档说是兼容IE5.5,亲测IE11可以,低版本未测试。

用以下几个属性组合,就可以将滚动条变得和背景色一样:

overflow-y: auto;scrollbar-arrow-color: #f0f2f5; /* 设置滚动条上的箭头颜色 */scrollbar-base-color: #f0f2f5; /* 设置滚动条的底色 */scrollbar-track-color: #f0f2f5; /* 设置滚动条块的背景色 */scrollbar-shadow-color: #f0f2f5; /* 设置箭头和滚动条右侧和底边的颜色 */

附:scrollbar-相关属性(仅适用于IE)值介绍:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。