Css实现漂亮的滚动条样式

各位、先看下第一个实现效果

 

 

产品经理：这个不好看，换一个
我：好看，再说不好看我要拔刀了

实现代码

• HTML

  <div class="test test-1">
        <div class="scrollbar"></div>
  </div>
  

• CSS

    .test {
    width   : 50px;
    height  : 200px;
    overflow: auto;
    float   : left;
    margin  : 5px;
    border  : none;
    }
    .scrollbar {
    width : 30px;
    height: 300px;
    margin: 0 auto;
    }
    .test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    .test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
    }
    .test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
    }
  

---

产品经理：我有枪
我：马上改，您看这是第二个样子

 

 

实现代码

• HTML

  <div class="test test-5">
        <div class="scrollbar"></div>
  </div>
  

• CSS

    .test-5::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    }
    .test-5::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
    }

作者：nomooo
链接：https://www.jianshu.com/p/c2addb233acd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。