浏览器滚动条改变

滚动条样式属于伪类，css3中有滚动条的样式：

• ::-webkit-scrollbar 滚动条整体部分
• 
  
• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往
• 右移动，取决于是垂直滚动条还是水平滚动条）
• 
  
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• 
  
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方
• 块的位置。
• 
  
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• 
  
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

例子：

/* Let's get this party started */

::-webkit-scrollbar { width: 12px;} 

/* Track */

::-webkit-scrollbar-track {  

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  

-webkit-border-radius: 10px; border-radius: 10px;} 

/* Handle */

::-webkit-scrollbar-thumb { -

webkit-border-radius: 10px;  

border-radius: 10px;  

background: rgba(255,0,0,0.8);  

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4); }

可以定义滚动条，如图：

                      两滚动条为原始滚动条和改变后的滚动条。

::-webkit-scrollbar {             //定义滚动条的首要条件

width: 12px; //width和height属性分别表示定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 。还可以用百分比

height: 60px;

 background-color: #F5F5F5; 

} 

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
} 

/*定义滑块 内阴影+圆角（中间滑动的条块）*/  

::-webkit-scrollbar-thumb  {   

border-radius: 10px;   

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  

 background-color: #555;

} 

::-webkit-scrollbar-thumb:vertical {//滚动条滑动块，即图一的中间滑块，vertical表示垂直方向
        height: 50px;
        background-color: rgba(255,255,255,.3);
        -webkit-border-radius: 8px;
}
::-webkit-scrollbar-thumb:horizontal {//滚动条滑动块，即图一的中间滑块，horizontal表示水平方向
    width: 50px;
    background-color: rgba(255,255,255,.3);
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-button:increment {  // 指上下点击滚动的按钮（即是图1的顶部和底部的三角形）
display: block;
height: 12px;
margin: 10px;
border-style: solid;
background-color: #eee;;
}
.from-item::-webkit-scrollbar-button:start:increment {   //上三角形按钮
border-width: 0px 6px 6px 6px;
border-color: transparent transparent #999 transparent;
}
.from-item::-webkit-scrollbar-button:end:increment {  //下三角形按钮
border-width:  6px 6px 0px 6px;
border-color: #999 transparent transparent transparent;
}              

::-webkit-scrollbar-track-piece { //滚动条的颜色（如果一开始就设置背景色，这个可以忽略）
    background-color: rgba(0,0,0,.2);
    -webkit-border-radius: 0 0 8px 8px;
}