欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 自定义滚动条样式

程序员文章站 2022-07-09 19:32:23
以前写的,找不到效果图了,就不上效果图了,直接上代码好啦,免得自己忘了怎么写 .login-box { //login-box就是 需要修改样式的 盒子 width: 200px; margin-top: 10px; height: calc(100% - 88px); overflow-y: au ......

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

      .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 的同级