用css自定义滚动条样式

如果你是一个搞网页前端的，有必要了解一下自定义滚动条样式这个东东。目前支持自定义滚动条样式的有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
    
    


    
    

     
     test
    
    


    
    

     
     test
    
    


    
    

     
     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
    
    

 

CSS

«  不经意间发现的小惊喜

素描大师教你如何画画！ »

发表
评论

带符号 * 的表示必填项

1. 乐乐January 19th, 2014 at 05:56 pm

   IE不兼容！

   回复
2. gfNovember 28th, 2013 at 04:50 pm

   回复
3. 千寻September 27th, 2013 at 11:32 pm

   = =这原来没得复制粘贴么

   回复
4. 野蛮人September 23rd, 2013 at 11:36 am

   :evil: 我已经换上自定义样式条啦~~

   回复
5. rayAugust 17th, 2013 at 10:01 pm

   分析真详细

   回复
6. 黎健雄May 30th, 2013 at 10:40 am

   找很久了。。
   看上去，非常复杂。。。

   回复
   1. 麦田一根葱博主May 30th, 2013 at 11:37 am

      @黎健雄: 其实也不是很复杂...............

      回复
7. 上海速腾数据May 28th, 2013 at 01:14 pm

   新人类要被代码淘汰了

   回复
   1. 麦田一根葱博主May 28th, 2013 at 01:19 pm

      啊？

      回复
8. 予沐May 22nd, 2013 at 01:49 pm

   哎唷...

   回复
   1. 麦田一根葱博主May 22nd, 2013 at 02:26 pm

      嗯哼？

      回复
9. 麦田一根葱博主May 21st, 2013 at 06:39 pm

   :roll:

   回复

© 2012-2016  iMC &  MaiCong &  Typecho