直播平臺開發，滾動條樣式的修改和更換

直播平臺開發，滾動條樣式的修改和更換實現的相關程式碼

// IE瀏覽器
* {
  //三角箭頭的顏色
  scrollbar-arrow-color: #c0c4cc;
  //滾動條滑塊按鈕的顏色*/
  scrollbar-face-color: #a2a2a3;
  //滾動條整體顏色*/
  scrollbar-highlight-color: #a2a2a3;
  //滾動條陰影*/
  scrollbar-shadow-color: #a2a2a3;
  //滾動條軌道顏色*/
  scrollbar-track-color: #f4f4f5;
  //滾動條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色
  scrollbar-3dlight-color: #a2a2a3;
  //滾動條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色
  scrollbar-darkshadow-color: #a2a2a3;
  //滾動條基準顏色
  scrollbar-base-color: #f4f4f5;
  scroll-padding-block: 6px;
}
// 谷歌瀏覽器
//  https://www.cnblogs.com/that-is-ok/p/10757282.html
//  
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
/* Track */
::-webkit-scrollbar-track {
  /*滾動條裡面軌道*/
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;*/
}
/* Handle */
::-webkit-scrollbar-thumb {
  /*滾動條裡面小方塊*/
  border-radius: 12px;
  border: 5px solid rgba(255, 255, 255, 1);
  background: lightgray;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: darkgray;
}
// 如果想滑鼠進入某個控制元件才顯示滾動條的話，可以參考下面的程式碼寫
// IE下隱藏
//.el-table__body-wrapper,
//.el-menu {
//  -ms-overflow-style: none;
//}
//.el-table__body-wrapper:hover,
//.el-menu:hover {
//  -ms-overflow-style: auto;
//}
// Chrome下隱藏
// .el-menu::-webkit-scrollbar,
// .el-table__body-wrapper::-webkit-scrollbar {
//   display: none;
// }
// .el-menu:hover::-webkit-scrollbar,
// .el-table__body-wrapper:hover::-webkit-scrollbar {
//   display: block;
// }

以上就是 直播平臺開發，滾動條樣式的修改和更換實現的相關程式碼，更多內容歡迎關注之後的文章