/*定義滾動條樣式（高寬及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滾動條寬度， width：對應豎滾動條的寬度  height：對應橫滾動條的高度*/
            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;

最後，總結 一個滾動條的組成部分(通常設定前三個即可)：

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