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 的同級