1. 程式人生 > 實用技巧 >CSS - 修改滾動條樣式

CSS - 修改滾動條樣式

  • ::-webkit-scrollbar—整個滾動條.

  • ::-webkit-scrollbar-button—滾動條上的按鈕(上下箭頭).

  • ::-webkit-scrollbar-thumb—滾動條上的滾動滑塊.

  • ::-webkit-scrollbar-track—滾動條軌道.

  • ::-webkit-scrollbar-track-piece—滾動條沒有滑塊的軌道部分.

  • ::-webkit-scrollbar-corner—當同時有垂直滾動條和水平滾動條時交匯的部分.

  • ::-webkit-resizer—某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

/* 整個滾動條 */
::-webkit-scrollbar { 
    width:20px; 
    height:20px; 
    background-color:#F5F5F5; 
}
/* 滾動條上的按鈕 (上下箭頭). */
::-webkit-scrollbar-button {
    background-color: #2196F3;
    border-radius: 50px;
    height: 20px;
    width: 20px;
}
/* 滾動條上的滾動滑塊. */
::-webkit-scrollbar-thumb { 
    background-color
:#E91E63; border-radius: 50px; } /* 滾動條軌道. */ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0, 142, 255, 1); box-shadow:inset 0 0 6px rgba(0, 142, 255, 1, 1); background-color:#F5F5F5; } /* 滾動條沒有滑塊的軌道部分 */ ::-webkit-scrollbar-track-piece { background-color: rgba(255, 255, 0, 0.43)
; } /* 當同時有垂直滾動條和水平滾動條時交匯的部分. */ ::-webkit-scrollbar-corner { background:transparent; } /* 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕). */ ::-webkit-resizer { }