/ css

CSS自定义滚动条

水平滚动条

// Less
&::-webkit-scrollbar-button{
    background-color: #074337;
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    &:horizontal {
      &:start:decrement{ // 水平左侧(垂直上侧)“减”按钮
        display: block;
        background-image: url("~@/assets/images/icon/icon_sanjiao_left.png");
      }
      &:start:increment{ // 水平左侧(垂直上侧)“加”按钮
        display: none;
      }
      &:end:decrement{ // 水平右侧(垂直下侧)“减”按钮
        display: none;
      }
      &:end:increment{ // 水平右侧(垂直下侧“加”按钮
        display: block;
        background-image: url("~@/assets/images/icon/icon_sanjiao_right.png");
      }
    }

  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    height: 2rem;
    display: block;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background   : #097b64;
    border-bottom: solid 2px #074337;
    border-top: solid 2px #074337;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    padding: 2px 0;
    background   : #074337;
  }

效果图
--

CSS自定义滚动条
分享