css 自定义滚动条样式

以前写的，找不到效果图了，就不上效果图了，直接上代码好啦，免得自己忘了怎么写

      .login-box {   //login-box就是 需要修改样式的 盒子
        width: 200px;
        margin-top: 10px;
        height: calc(100% - 88px);
        overflow-y: auto;
        .login {
          display: flex;
          justify-content: space-between;
          z-index: 9999;
          color: #6f7180;
          &.backgroundhover {
            color: #409eff;
          }
          &:hover {
            color: #409eff;
            z-index: 9999;
          }
        }
        .login:hover {
          cursor: pointer;
        }
        .login-left {
          margin-top: 10px;
          width: 200px;
        }
      }
      ::-webkit-scrollbar {  //以下是修改滚动条样式的代码
        width: 4px;
        height: 4px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.2);
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 0;
        background: rgba(64, 158, 255, 0.5);
      }

　　这里的login-box 就是需要修改滚动条样式的div， 我这里用的是scss 语法，所以可以这样写，复制除了 修改滚动条以外的样式是为了提醒自己，不要在 login-box里面去修改，要放在 ligin-box 的同级

来源：https://www.cnblogs.com/SuperBrother/p/12653951.html