前言

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

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

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

例子

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