Css实现漂亮的滚动条样式

原文链接：https://www.jianshu.com/p/c2addb233acd

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

image

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

实现代码

• 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;
    }
  
  

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

image

实现代码

• 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;
    }
  
  

产品经理：这个还可以，晚上给你加个鸡腿，好好加班
我：****。

顺便在这元宵佳节，祝各位节日快乐🎉🎉🎉

image

这里卿洋
愿喜❤️

</article>