Vue及Antd组件修改滚动条样式

1. CSS样式

.scrollContent {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    height: 4px;
    background: #663399;
  }
  
  &::-webkit-scrollbar-track {
  
    background: none;
  }
  
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    background-color: #cd00cd;
  }
}

2. Select 下拉菜单滚动条

.ant-select-dropdown-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 9px;
  height: 9px;
  background: #663399;
}
.ant-select-dropdown-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 9px;
  background-color: #cd00cd;
}

3. Table 下拉菜单滚动条

// 滚动条背景颜色
/deep/ .ant-table-body::-webkit-scrollbar,
.info::-webkit-scrollbar {
  height: 9px;
  width: 9px;
  background-color: #3498db7e;
}

// 滚动条颜色
/deep/ .ant-table-body::-webkit-scrollbar-thumb,
.info::-webkit-scrollbar-thumb {
  border-radius: 9px;
  background-color: #3498db;
}