前言

目前我們可以通過 CSS偽類 來實(shí)現(xiàn)滾動條的樣式修改，以下為修改滾動條樣式用到的CSS偽類：

::-webkit-scrollbar — 整個滾動條
::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)
::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊
::-webkit-scrollbar-track — 滾動條軌道
::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分
::-webkit-scrollbar-corner — 當(dāng)同時有垂直滾動條和水平滾動條時交匯的部分
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

此處附上MDN文檔傳送門：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

例子

/* 整個滾動條 */
.vxe-table--body-wrapper::-webkit-scrollbar {height: 14px;width: 8px;
}/* 滾動條里面滑塊 */
.vxe-table--body-wrapper::-webkit-scrollbar-thumb {border-radius: 10px;background: #347ae9;
}/*滾動條里面軌道*/
.vxe-table--body-wrapper::-webkit-scrollbar-track {border-radius: 10px;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);background: #eee;
}