滾動條組成

• -webkit-scrollbar 滾動條整體部分
• -webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
• -webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
• -webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置。
• -webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分（除去）
• -webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
• -webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件

demo寫法

例如要給<div class="box">我是一段很長的文字...</div>加上滾動條 并且設(shè)置滾動條的樣式

/*定義滾動條高寬及背景 高寬分別對應(yīng)橫豎滾動條的尺寸*/
box::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
 
/*定義滾動條軌道 內(nèi)陰影+圓角*/
box::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
 
/*定義滑塊 內(nèi)陰影+圓角*/
box::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/*通用樣式*/
::-webkit-scrollbar {
    width: 0.07rem;
    height: 0.07rem;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.05rem;
    background-color: rgba(144, 146, 152, 0.3);
}

::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

結(jié)果示例如下（可以隨意改成自己喜歡的樣子哦）：

滾動條示例

喜歡的話給我點(diǎn)個贊吧！

居老師