先看效果圖

image

image.gif

?

附上效果圖代碼：

1.style部分
<style>
        /*定義滾動條樣式（高寬及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滾動條寬度， width：對應(yīng)豎滾動條的寬度  height：對應(yīng)橫滾動條的高度*/
            background: #007acc;
        } 
        /*定義滾動條軌道（凹槽）樣式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 較少使用 */
            border-radius: 3px; 
        } 
        /*定義滑塊 樣式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滾動條滑塊長度 */
            background-color: #ccc; 
        }
    </style>

2.body部分
<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
        11111111
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
        <p>11111111111111111111</p>
    </div>

image.gif

最后，總結(jié) 一個滾動條的組成部分(通常設(shè)置前三個即可)：

• ::-webkit-scrollbar 滾動條整體部分
• ::-webkit-scrollbar-thumb 滾動條里面的小方塊（即滾動條滑塊），能向上向下移動（或橫向滾動條可往左往右移動）
• ::-webkit-scrollbar-track 滾動條的軌道（對應(yīng)上圖滾動條凹槽，里面裝有Thumb，即滾動條滑塊）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調(diào)小方塊的位置
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
• ::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分
• ::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件