滾動條樣式修改

::-webkit-scrollbar{
  width: 12px;     /*高寬分別對應橫豎滾動條的尺寸*/
  height: 1px;
}
//滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。
::-webkit-scrollbar-button{

}
//滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //border-radius: 10px;
  background: rgba(13, 89, 179, 0.4) !important;
}
// 外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece{

}
//內層軌道，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background: rgba(13, 89, 179, 1);
 
}
//滾動條裏面可以拖動的那部分
::-webkit-scrollbar-corner{

}
//邊角(兩個滾動條夾角)
::-webkit-resizer{

}

 

 

 

參考 https://blog.csdn.net/qiphon3650/article/details/81036444

參考https://webkit.org/blog/363/styling-scrollbars/