全局滚动条样式覆盖设置

全局滚动条样式覆盖设置

在全局样式文件中加入如下代码

// 滚动条颜色
@scrollbar-thumb: fade(#bcc1cc, 20%); // 滚动条基础颜色
@scrollbar-thumb-hover: #bcc1cc; // 滚动条悬浮色
// 灰色底色的时候的滚动条初始背景色
@scrollbar-thumb-for-gray-bg: #dee1e8;

/* 滚动条 */
/* 设置滚动条的样式 宽度用rem的会有些问题，表格（无数据的时候）那会有个层盖住滚动条*/
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  min-width: 6px;
  min-height: 6px;
  background: @scrollbar-thumb;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: @scrollbar-thumb-hover;
}
/* 滚动槽 */
::-webkit-scrollbar-track-piece {
  background-color: transparent;
  border-radius: 5px;
}