自定义浏览器滚动条样式

在做一个主题换肤的需求时，需要根据用户选择的主题，适配页面元素的配色。

这里就涉及到对浏览器默认滚动条样式的编辑。

查阅了文档发现，目前webkit支持拥有overflow属性的区域，列表框、下拉菜单、textarea的滚动条自定义样式，所以用处还是很大的。

滚动条组成部分

::-webkit-scrollbar     滚动条整体部分 
::-webkit-scrollbar-thumb     滚动条里的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） 
::-webkit-scrollbar-track     滚动条的轨道（里面装有thumb） 
::-webkit-scrollbar-button     滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 
::-webkit-scrollbar-track-piece     内层轨道，滚动条中间部分

了解了滚动条各个属性后，就可以开始设置样式，代码如下。

因为需求只需要符合主题配色，所以这次我们只设置滚动条背景::-webkit-scrollbar,滚动条轨道::-webkit-scrollbar和小滑块::-webkit-scrollbar-track的样式::-webkit-scrollbar-thumb即可，如下：

.ant-calendar-time-picker-select {
    border-right: 1px solid var(--timerRangeBorderColor);
    overflow-y: scroll;
    /*定义滚动条高宽及背景
    高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      background-color: #333333;
    }
    /*定义滚动条轨道
    内阴影+圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow:inset 0 0 6px #333333;
      border-radius:10px;
      background-color: #9C9C9C;
    }
    /*定义滑块
    内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius:10px;
      -webkit-box-shadow:inset 0 0 6px #9C9C9C;
      background-color: #9C9C9C;
    }
    .ant-calendar-time-picker-select-option-selected {
      color: #FFFFFF;
      background-color: #9C9C9C;
    }
}

效果如下，如果需要设置其他的样式，也可根据具体需求调整。

参考文章： https://segmentfault.com/a/1190000012800450