CSS 设置滚动条样式

滚动条是网页中的常见元素，但通常改变它的样式并不是那么容易，所以长期以来一直处于被忽略的地位。其实在 webkit 浏览器中，我们可以通过一些专有的伪元素和伪类对滚动条进行定制。

伪元素

    ::-webkit-scrollbar              { /* 滚动条的整体部分 */ }
    ::-webkit-scrollbar-button       { /* 滚动条上下两端的按钮 */ }
    ::-webkit-scrollbar-track        { /* 滚动条的轨道部分 */ }
    ::-webkit-scrollbar-track-piece  { /* 滚动条的轨道部分，不包含滑块 */ }
    ::-webkit-scrollbar-thumb        { /* 滚动条的滑块 */ }
    ::-webkit-scrollbar-corner       { /* 两条滚动条相交部分 */ }

伪类选择器

    :horizontal /* 水平方向滚动条*/
    :vertical /* 垂直方向滚动条 */
    :decrement /* 适用于 button 和 track-piece，对于垂直滚动条来说表示上方按钮部分或滚动条上半部分 */
    :increment /* 适用于 button 和 track-piece，对于垂直滚动条来说表示下方按钮部分或滚动条下半部分 */ 
    :start /* 同 decrement  */
    :end /* 同 increment */
    :corner-present /* 适用于所有 scollbar 局部伪元素，表示滚动条的 corner 是否存在*/
    :enable /* 适用于 button、thumb、track-piece 和 track，表示滚动条可以活动 */
    :disable /* 适用于 button、thumb、track-piece 和 track，表示滚动条不可以活动，（手动设置 overflow:scroll，强制出现滚动条时会出现这种情况） */
    :active /* 适用于 thumb 和 track，当鼠标移到滑块上时触发 */
    :hover /* 适用于 thumb 和 track，当鼠标拖动滑块时触发 */

示例代码

    ::-webkit-scrollbar {
      height: 16px;
      overflow: visible;
      width: 16px
    }

    ::-webkit-scrollbar-button {
      height: 0;
      width: 0
    }

    ::-webkit-scrollbar-track {
      background-clip: padding-box;
      border: solid transparent;
      border-width: 0 0 0 4px
    }

    ::-webkit-scrollbar-track:active {
      background-color: rgba(0, 0, 0, .05);
      -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
    }

    ::-webkit-scrollbar-track:hover {
      background-color: rgba(0, 0, 0, .05);
      -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
    }

    ::-webkit-scrollbar-track:horizontal {
      border-width: 4px 0 0
    }

    ::-webkit-scrollbar-track:horizontal:hover {
      -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
      box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
    }

    ::-webkit-scrollbar-track:horizontal:active {
      -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07);
      box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .2);
      background-clip: padding-box;
      border: solid transparent;
      border-width: 1px 1px 1px 6px;
      min-height: 28px;
      padding: 100px 0 0;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, .4);
      -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
    }

    ::-webkit-scrollbar-thumb:active {
      background-color: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
    }

    ::-webkit-scrollbar-thumb:horizontal {
      border-width: 6px 1px 1px;
      padding: 0 0 0 100px;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07);
      box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
    }

    ::-webkit-scrollbar-corner {
      background: transparent
    }

以上 google drive 的滚动条的部分代码，把它们加到你的网站里，看看有什么变化吧。