/** 通用滚动条样式 */
.m-scroll {
  // 整个滑动区域
  &::-webkit-scrollbar {
    width: 20px;
    height: 20px;
    background-color: rgba(40,45,51,1);
  }

  // 轨道
  // &::-webkit-scrollbar-track {}

  // 滑块 使用border来代替padding
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(20,21,23,1);
    border: 2px solid rgba(40,45,51,1);
  }

  // 横轴 纵轴交界处
  &::-webkit-scrollbar-corner {
    background-color: rgba(40,45,51,1);
  }

  // 显示按钮
  &::-webkit-scrollbar-button:start:decrement,
  &::-webkit-scrollbar-button:end:increment {
    display: block;
    width: 20px;
    height: 18px;
  }

  &::-webkit-scrollbar-button:horizontal:start:decrement,
  &::-webkit-scrollbar-button:horizontal:end:increment {
    display: block;
    height: 20px;
    width: 18px;
  }

  // 垂直上箭头
  &::-webkit-scrollbar-button:start:decrement {
    background: url('~@/assets/styles/images/arrow-up.svg') 4px 5px no-repeat;
  }

  // 垂直下箭头
  &::-webkit-scrollbar-button:end:increment {
    background: url('~@/assets/styles/images/arrow-down.svg') 4px 5px no-repeat;
  }

  // 水平左箭头
  &::-webkit-scrollbar-button:horizontal:start:decrement {
    background: url('~@/assets/styles/images/arrow-left.svg') 5px 4px no-repeat;
  }

  // 水平右箭头
  &::-webkit-scrollbar-button:horizontal:end:increment {
    background: url('~@/assets/styles/images/arrow-right.svg') 5px 4px no-repeat;
  }
} 

// 隐藏滚动条
.hidden-scroll {
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}