滾動(dòng)條組成
::-webkit-scrollbar 滾動(dòng)條整體部分
::-webkit-scrollbar-thumb 滾動(dòng)條里面的小方塊,能向上向下移動(dòng)(或往左往右移動(dòng),取決于是垂直滾動(dòng)條還是水平滾動(dòng)條)
::-webkit-scrollbar-track 滾動(dòng)條的軌道(里面裝有Thumb)
::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕,允許通過(guò)點(diǎn)擊微調(diào)小方塊的位置。
::-webkit-scrollbar-track-piece 內(nèi)層軌道,滾動(dòng)條中間部分(除去)
::-webkit-scrollbar-corner 邊角,即兩個(gè)滾動(dòng)條的交匯處
::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過(guò)拖動(dòng)調(diào)整元素大小的小控件
示例
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}