游客

标题:CSS通过伪元素自定义滚动条样式 IE定义滚动条样式
正文:
相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。IE下的滚动条样式IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/ scrollbar-track-color: color; /*立体滚动条背景颜色*/ scrollbar-base-color:color; /*滚动条的基色*/大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用：选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老湿推荐。webkit的自定义滚动条样式yes，这里才是今天要重点介绍的。从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。webkit最近实现了对滚动条的支持，先看一个简单的demo：不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrol
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页