前端實現：滾動條樣式修改

谷歌展示如圖所示

代碼：

/*滾動條整體部分,必須要設置*/
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
  background-color: transparent;
}
/*滾動條的軌道*/
::-webkit-scrollbar-track{
  background-color: transparent;
}
/*滾動條的滑塊按鈕*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: rgb(7,61,92);
  box-shadow: inset 0 0 5px rgb(7,61,92);
}
/*滾動條的上下兩端的按鈕*/
::-webkit-scrollbar-button{
  height: 0;
  background-color: rgb(7,61,92);
}

// 兩個滾動條的交匯處
::-webkit-scrollbar-corner{
  background-color: transparent;
}

/* IE 瀏覽器 */
div{
  /*三角箭頭的顏色*/
  scrollbar-arrow-color: rgb(7,61,92);
  /*滾動條滑塊按鈕的顏色*/
  scrollbar-face-color: rgb(7,61,92);
  /*滾動條整體顏色*/
  scrollbar-highlight-color: rgb(12,23,35);
  /*滾動條陰影*/
  scrollbar-shadow-color: transparent;
  /*滾動條軌道顏色*/
  scrollbar-track-color: transparent;
  /*滾動條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色*/
  scrollbar-3dlight-color:rgb(7,61,92);
  /*滾動條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色*/
  scrollbar-darkshadow-color: rgb(7,61,92);
  /*滾動條基準顏色*/
  scrollbar-base-color: rgb(7,61,92);
}