2021-09-16 页面滚动条美化

页面滚动条美化

细节备注上都有，可自行调整

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width           : 8px !important;
  height          : 10px !important;
  background-color: transparent;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
  border-radius     : 10px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius   : 0;
  border-style    : dashed;
  background-color: rgba(157, 165, 183, 0.4);
  border-color    : transparent;
  border-width    : 1.5px;
  background-clip : padding-box;
}

// 滚动条滑块由背景色和border共同渲染
::-webkit-scrollbar-thumb:hover {
  background: #e0e1e3;
}