css 自定义滚动条样式

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
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有