CSS - 修改滾動條樣式
阿新 • • 發佈:2020-07-27
-
::-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 {
}