css 实现滚动条美化 支持鼠标移入移出效果

.count{
    margin: 15px;
    width: 540px;
    height: 472px;
    position: relative;
    overflow-y: scroll;
      &::-webkit-scrollbar{
        width:5px;
        height:16px;
        background-color:#F5F5F5;
      }
      /*定义滚动条轨道
      内阴影+圆角*/
      &::-webkit-scrollbar-track{
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
        border-radius:10px;
        background-color:#F5F5F5;
      }
      /*定义滑块
      内阴影+圆角*/
      &::-webkit-scrollbar-thumb{
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);
        background-color: rgba(0, 0, 0, 0.02);
      }
    &:hover{
      &::-webkit-scrollbar-track{
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
        background-color:#F5F5F5;
      }
      &::-webkit-scrollbar-thumb{
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
        background-color: rgba(0, 0, 0, 0.45);
      }
    }
  }

https://segmentfault.com/a/1190000012800450?utm_source=tag-newest