如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东。目前支持自定义滚动条样式的有IE浏览器、webkit内核浏览器(chrome)。
IE下的滚动条样式
1、样式规则
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:url(mouse.cur); /*自定义个性鼠标*/
/*以上2项适用与:body、div、textarea、iframe*/
2、Overflow内容溢出时的设置
- overflow 水平及垂直方向内容溢出时的设置
- overflow-x 水平方向内容溢出时的设置
- overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible
、scroll
、hidden
、auto
- visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。
- hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
- scroll 无论内容是否超越范围,都将显示滚动条。
- auto 当内容超出范围时,显示滚动条,否则不显示。
3、运用
test
4、示例
黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条
灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示
webkit内核下的滚动条样式(chrome)
滚动条是一个伪元素,可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭,只按照用户自定义的css信息进行渲染。
1、滚动条的所有伪元素
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-button /* 滚动条两端的按钮 */
::-webkit-scrollbar-track /* 外层轨道 */
::-webkit-scrollbar-track-piece /*/ 内层轨道,滚动条中间部分 */
::-webkit-scrollbar-thumb /* 滑块 */
::-webkit-scrollbar-corner /* 边角 */
::-webkit-resizer /* 右下角拖动块 */
webkit提供的不止这些,任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条仍然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中:
:horizontal
– horizontal伪类应用于水平方向的滚动条:vertical
– vertical伪类应用于竖直方向的滚动条:decrement
– decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。):increment
– increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。):start
– start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。:end
– 类似于start伪类,标识对象是否放到滑块的后面。:double
-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。:single-button
– 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。:no-button
– 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。:corner-present
– 用于所有滚动条轨道,指示滚动条圆角是否显示。:window-inactive
– 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)::-webkit-scrollbar-track-piece:start
{/*滚动条上半边或左半边*/}::-webkit-scrollbar-thumb:window-inactive
{/*当焦点不在当前区域滑块的状态*/}::-webkit-scrollbar-button:horizontal:decrement:hover
{/*当鼠标在水平滚动条下面的按钮上的状态*/}
另外,:enabled
、:disabled
、:hover
和 :active
等伪类同样可以适用于滚动条中。
2、示例
样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1 样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1
IE不兼容!
= =这原来没得复制粘贴么
:evil: 我已经换上自定义样式条啦~~
分析真详细
找很久了。。
看上去,非常复杂。。。
@黎健雄: 其实也不是很复杂...............
新人类要被代码淘汰了
啊?
哎唷...
嗯哼?
:roll: