css自定义滚动条样式

浏览器的滚动条默认样式是很老气的，有时候会碰到修改滚动条样式的需求，然后我就看了一下css的资料，整理出来下面这些代码，希望可以帮到困境中的你。话不多说，直接上代码

html部分

<ul class="scroll">
  <li>苹果</li>
  <li>香蕉</li>
  <li>榴莲</li>
  <li>菠萝</li>
  <li>草莓</li>
  <li>橘子</li>
  <li>橙子</li>
  <li>车厘子</li>
  <li>樱桃</li>
  <li>桃子</li>
  <li>杏子</li>
  <li>梨子</li>
  <li>西瓜</li>
  <li>火龙果</li>
  <li>葡萄</li>
</ul>

css部分

<style type="text/css">
  .scroll{
            width:100px;
            height:200px;
            overflow:auto;
            border:1px solid #f5f5f5;
        margin:50px auto;
          }
  .scroll::-webkit-scrollbar{
            width: 8px;
            height: 8px;
   }
 /*正常情况下滑块的样式*/ 
   .scroll::-webkit-scrollbar-thumb {
                 background-color: rgba(0, 0, 0, .05);
                 border-radius: 10px;
                 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
/*鼠标悬浮在该类指向的控件上时滑块的样式*/ 
   .scroll:hover::-webkit-scrollbar-thumb {
               background-color: rgba(0, 0, 0, .2);
               border-radius: 10px;
               -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
/*鼠标悬浮在滑块上时滑块的样式*/
   .nui-scroll::-webkit-scrollbar-thumb:hover {
                 background-color: rgba(0, 0, 0, .4);
                 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
/*正常时候的主干部分*/
  .nui-scroll::-webkit-scrollbar-track {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
                background-color: white;
   }
 /*鼠标悬浮在滚动条上的主干部分*/
   .nui-scroll::-webkit-scrollbar-track:hover {
                 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
                 background-color: rgba(0, 0, 0, .01);
    }
</style>

效果:

scroll.png