1. 程式人生 > 其它 >vue element-ui表格的滾動條樣式修改

vue element-ui表格的滾動條樣式修改

vue element-ui表格的滾動條樣式修改


預設element-ui table固定表頭或列時,當表列過多出現滾動時,滾動條效果如下,效果不是很好看(個人感覺)

修改前效果:
在這裡插入圖片描述
在這裡插入圖片描述
修改後效果:
在這裡插入圖片描述
在這裡插入圖片描述
滿意度加加

直接加全域性程式碼樣式修改就可以了

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  /*滾動條寬度*/
  height: 8px;
  /*滾動條高度*/
  background-color: white;

}

/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  background-color: rgb(193, 193, 193);
  /*滾動條的背景顏色*/
  border-radius: 20px;
}