CSS自定义滚动条样式

本文原地址

1. 代码

  /*---滚动条整体样式--*/
  ::-webkit-scrollbar{
    width: 16px;
    height: 16px;
  }
  /*---滑块部分--*/
  ::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #555;
  }
  /*---轨道部分--*/
  ::-webkit-scrollbar-track-piece{
    border-radius: 10px;
    background-color: #eee;
  }
  /*---滚动条方向按钮--*/
  ::-webkit-scrollbar-button {
  }
  /*---滚动条下方空白--*/
  ::-webkit-scrollbar-track {
  }
  /* 可滚动元素的底角*/
  ::-webkit-scrollbar-corner {
  }
  /* 可拖动调整大小手柄 */
  ::-webkit-resizer {
  }

2. 兼容性

目前移动端基本兼容，PC端除了IE、Firefox、Opera外基本支持。

3. 参考资料

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