CSS3自定义滚动条样式 -webkit-scrollbar

一、滚动条的形成：

　　　当内容超出容器时，容器会出现滚动条。

二、如需改变滚动条样式，可通过css伪类来实现。

• 首先我们要了解滚动条。滚动条从外观来看是由两部分组成：

　　　　1，可以滑动的部分，我们叫它滑块

　　　　2，滚动条的轨道。

• 滚动条的css样式主要有三部分组成：

　　　　1，::-webkit-scrollbar 定义了滚动条整体的样式；

      　　2，::-webkit-scrollbar-thumb 滑块部分；

　  　　 3，::-webkit-scrollbar-track 轨道部分；

 三、代码实现：

效果图：

html代码：

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

css代码

.test{
     50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
     30px;
    height: 300px;
    margin: 0 auto;
  
}
  // 滚动条
  .test::-webkit-scrollbar{
     6px;
    height: 206px;
    background: #3d6599;
    margin-top: 20px;
  }
  // 滑块
  .test::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #85baff;
    height: 120px;
  }
  // 滑块轨道
  .test::-webkit-scrollbar-track{
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #3d6599;
    // height: 206px;
    // border: 1px solid red;
  }

注意：进度条的样式不要嵌套在class为test的样式里，需要写在.test样式外。