2023年6月20日发(作者：)
CSS⾃定义滚动条样式与颜⾊滚动条样式⼀般情况我们都是使⽤默认的，但⽤在设计创意类⽹站可能滚动条样式都需要重新定义了，下⾯我来介绍CSS⾃定义滚动条样式与颜⾊⽅法。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; /*滚动条的基⾊*/浏览器右边默认的滚动条或许有点呆板。并且在不同操作系统平台（Mac OS，Win xp78）上也有不⼀致的展现。⼀般这也不算什么⼤问题，甚⾄不算什么问题。但是总有写时候你需要改变⼀下，为了突出个性⽽来点不⼀样的。⽐如像QQ⾳乐和我的个⼈主页。这⾥所讲的css定义滚动条样式只限于webkit浏览器，通过css的⼀些伪类来定义。::-webkit-scrollbar //滚动条整体部分::-webkit-scrollbar-button //滚动条两端的按钮::-webkit-scrollbar-track //外层轨道::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb //（滚动条⾥⾯可以拖动的那个）::-webkit-scrollbar-corner //边⾓::-webkit-resizer//定义右下⾓拖动块的样式实际上还有很多更多的更丰富的伪类来控制滚动条样式，不过在以上列出的⼀些已经能够满⾜基本的需要了。此外：需要说明的是，IE浏览器其实是最早提供滚动条的样式⽀持的，但是其他浏览器并不买微软的账，所以只有IE才⽀持，并且个⼈以为IE那套实现的样式⽐较丑陋。有⼈开发了⼀套在线⽣成此样式的flash⼯具，想了解的同学可以移步这⾥。另外⽹上也有⼀些插件来实现⾃定义。如果你希望在多种浏览器都拥有⼀致的体验，可以尝试使⽤插件来实现。⼀些Demo或代码：::-webkit-scrollbar {width:14px;height:14px;background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);background-color:rgba(229,229,229,.3);-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;overflow:visible;border-radius:4px;border:solid 1px #A6A6A6;}::-webkit-scrollbar-button {width:0;height:0;display:block;background-color:transparent;}::-webkit-scrollbar-track {}::-webkit-scrollbar-track-piece {}::-webkit-scrollbar-thumb {background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;background-color:rgba(229,229,229,.9);overflow:visible;border-radius:4px;border:solid 1px #A6A6A6;}::-webkit-scrollbar-thumb:hover {background-color:rgba(229,229,229,.4);}::-webkit-scrollbar-thumb:active {background-color:rgba(229,229,229,1);-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;}::-webkit-scrollbar-corner {}::-webkit-resizer {}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-button:vertical{display:none}::-webkit-scrollbar-track:vertical{background-color:black}::-webkit-scrollbar-track-piece{background:#FFF}::-webkit-scrollbar-thumb:vertical{background-color:#999;}::-webkit-scrollbar-thumb:vertical:hover{background-color:#9f9f9f}::-webkit-scrollbar-corner:vertical{background-color:#535353}::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}当然webkit提供的不⽌这些，还有很多伪类，可以更丰富滚动条样式：:horizontal – 应⽤于⽔平⽅向的滚动条:vertical – 应⽤于竖直⽅向的滚动条:decrement – 应⽤于按钮和内层轨道(track piece)。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置(⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。):increment – 和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置(⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。):start – 应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。:end – 类似于start伪类，标识对象是否放到滑块的后⾯。:double-button – 该伪类以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。:single-button – 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀端。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。:no-button – ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。:corner-present – ⽤于所有滚动条块，指⽰滚动条圆⾓是否显⽰。:window-inactive – ⽤于所有的滚动条块，指⽰应⽤滚动条的某个页⾯容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以⽤于::selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类)另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以⽤于滚动条中。
2023年6月20日发(作者：)
CSS⾃定义滚动条样式与颜⾊滚动条样式⼀般情况我们都是使⽤默认的，但⽤在设计创意类⽹站可能滚动条样式都需要重新定义了，下⾯我来介绍CSS⾃定义滚动条样式与颜⾊⽅法。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; /*滚动条的基⾊*/浏览器右边默认的滚动条或许有点呆板。并且在不同操作系统平台（Mac OS，Win xp78）上也有不⼀致的展现。⼀般这也不算什么⼤问题，甚⾄不算什么问题。但是总有写时候你需要改变⼀下，为了突出个性⽽来点不⼀样的。⽐如像QQ⾳乐和我的个⼈主页。这⾥所讲的css定义滚动条样式只限于webkit浏览器，通过css的⼀些伪类来定义。::-webkit-scrollbar //滚动条整体部分::-webkit-scrollbar-button //滚动条两端的按钮::-webkit-scrollbar-track //外层轨道::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-thumb //（滚动条⾥⾯可以拖动的那个）::-webkit-scrollbar-corner //边⾓::-webkit-resizer//定义右下⾓拖动块的样式实际上还有很多更多的更丰富的伪类来控制滚动条样式，不过在以上列出的⼀些已经能够满⾜基本的需要了。此外：需要说明的是，IE浏览器其实是最早提供滚动条的样式⽀持的，但是其他浏览器并不买微软的账，所以只有IE才⽀持，并且个⼈以为IE那套实现的样式⽐较丑陋。有⼈开发了⼀套在线⽣成此样式的flash⼯具，想了解的同学可以移步这⾥。另外⽹上也有⼀些插件来实现⾃定义。如果你希望在多种浏览器都拥有⼀致的体验，可以尝试使⽤插件来实现。⼀些Demo或代码：::-webkit-scrollbar {width:14px;height:14px;background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);background-color:rgba(229,229,229,.3);-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;overflow:visible;border-radius:4px;border:solid 1px #A6A6A6;}::-webkit-scrollbar-button {width:0;height:0;display:block;background-color:transparent;}::-webkit-scrollbar-track {}::-webkit-scrollbar-track-piece {}::-webkit-scrollbar-thumb {background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;background-color:rgba(229,229,229,.9);overflow:visible;border-radius:4px;border:solid 1px #A6A6A6;}::-webkit-scrollbar-thumb:hover {background-color:rgba(229,229,229,.4);}::-webkit-scrollbar-thumb:active {background-color:rgba(229,229,229,1);-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;}::-webkit-scrollbar-corner {}::-webkit-resizer {}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-button:vertical{display:none}::-webkit-scrollbar-track:vertical{background-color:black}::-webkit-scrollbar-track-piece{background:#FFF}::-webkit-scrollbar-thumb:vertical{background-color:#999;}::-webkit-scrollbar-thumb:vertical:hover{background-color:#9f9f9f}::-webkit-scrollbar-corner:vertical{background-color:#535353}::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}当然webkit提供的不⽌这些，还有很多伪类，可以更丰富滚动条样式：:horizontal – 应⽤于⽔平⽅向的滚动条:vertical – 应⽤于竖直⽅向的滚动条:decrement – 应⽤于按钮和内层轨道(track piece)。它⽤来指⽰按钮或者内层轨道是否会减⼩视窗的位置(⽐如，垂直滚动条的上⾯，⽔平滚动条的左边。):increment – 和decrement类似，⽤来指⽰按钮或内层轨道是否会增⼤视窗的位置(⽐如，垂直滚动条的下⾯和⽔平滚动条的右边。):start – 应⽤于按钮和滑块。它⽤来定义对象是否放到滑块的前⾯。:end – 类似于start伪类，标识对象是否放到滑块的后⾯。:double-button – 该伪类以⽤于按钮和内层轨道。⽤于判断⼀个按钮是不是放在滚动条同⼀端的⼀对按钮中的⼀个。对于内层轨道来说，它表⽰内层轨道是否紧靠⼀对按钮。:single-button – 类似于double-button伪类。对按钮来说，它⽤于判断⼀个按钮是否⾃⼰独⽴的在滚动条的⼀端。对内层轨道来说，它表⽰内层轨道是否紧靠⼀个single-button。:no-button – ⽤于内层轨道，表⽰内层轨道是否要滚动到滚动条的终端，⽐如，滚动条两端没有按钮的时候。:corner-present – ⽤于所有滚动条块，指⽰滚动条圆⾓是否显⽰。:window-inactive – ⽤于所有的滚动条块，指⽰应⽤滚动条的某个页⾯容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以⽤于::selection伪元素。webkit团队有计划扩展它并推动成为⼀个标准的伪类)另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以⽤于滚动条中。
发布评论