修改滚动条样式

753 阅读1分钟

修改滚动条样式

局部修改

/deep/ .team-box::-webkit-scrollbar {
  width: 2px; /*滚动条宽度*/
  height: 10px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
/deep/ .team-box::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px #f1f1f1 inset; /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #f1f1f1; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
/deep/ .team-box::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px #c1c1c1 inset; /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: #c1c1c1; /*滚动条的背景颜色*/
}

全局修改

  ::-webkit-scrollbar { 
    width: 6px; 
    height: 8px; 
    background-color: #ebeef5; 
  } 
  ::-webkit-scrollbar-thumb { 
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
    background-color: #ccc; 
  } 
  ::-webkit-scrollbar-track{ 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 
    border-radius: 3px; 
    background: rgba(255, 255, 255, 1); 
  }