自定义滚动条样式

在所有浏览器，滚动条可定制性最强的当属 webkit 内核的浏览器了。因为源代码开放的原因，市面上基于 webkit 内核的浏览器有很多。例如有：Google Chrome、Opera（opera 最近宣布使用 webkit 内核了）、360 极速浏览器，猎豹浏览器等，搜狗浏览器等等

  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    height: 10px !important;
    width: 10px !important;
  }
  /*定义滑块，内阴影及圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border-style: dashed;
    background-color: rgba(166, 168, 180, 0.4);
    border-color: #e2242400;
    border-width: 1.5px;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(161, 164, 173, 0.4);
  }

  /*滚动条里面轨道*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }