css3自定义滚动条

​ 浏览器默认的滚动条样式不是很美观，在有些需求中，我们需要更改默认滚动条样式。目前还无法做到兼容所有浏览器的范围内修改默认滚动条样式，Google、IE可更改默认滚动条样式，火狐暂不支持更改默认滚动条样式。

​ 滚动条可修改以下样式：

修改部分	Google对应伪类
滚动条宽高及背景	::-webkit-scrollbar
滚动条轨道	::-webkit-scrollbar-track
滚动条滑块	::-webkit-scrollbar-thumb
滚动条顶部及底部按钮	::-webkit-scrollbar-button

• Google

  //滚动条宽、高、背景色
  ::-webkit-scrollbar{
      width:8px;
      height:8px;
      background-color:#999;
  }
  //轨道颜色、阴影
  ::-webkit-scrollbar-track{
      background-color:#fff;
      -webkit-box-shadow:none;
  }
  //滑块颜色、阴影、边框
  ::-webkit-scrollbar-thumb{
      border-radius:10px;
      background-color:#ddd;
      -webkit-box-shadow:none;
  }
  //按钮颜色、边框
  ::-webkit-scrollbar-button{
       background-color:#000;
       border:none;
  }
  

滚动条效果图：

• IE

  scrollbar-arrow-color: color; /*顶部、底部按钮颜色*/
  scrollbar-face-color: color; /*滚动条的颜色（包括箭头部分的背景色）*/
  scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  scrollbar-highlight-color: color; /*滚动条的高亮颜色*/
  scrollbar-shadow-color: color; /*滑块阴影的颜色*/
  scrollbar-darkshadow-color: color; /*滑块外阴影的颜色*/
  scrollbar-track-color: color; /*滑块背景颜色*/
  scrollbar-base-color:color; /*滚动条的基色*/