1. 程式人生 > 實用技巧 >滾動條樣式優化

滾動條樣式優化

/* 滾動條樣式 */
/*修改滾動條樣式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::
-webkit-scrollbar-corner{ background: #179a16; } /* ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裡面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直滾動條還是水平滾動條) ::-webkit-scrollbar-track 滾動條的軌道(裡面裝有Thumb) ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,允許通過點選微調小方塊的位置。 ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去) ::-webkit-scrollbar-corner 邊角,即兩個滾動條的交匯處 ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控制元件
*/