/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

下面的偽類已經(jīng)被引入，并且可以應(yīng)用于偽元素。

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:horizontal -horizontal偽類適用于任何具有水平方向的滾動條。

:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
:vertical -vertical偽類適用于任何垂直方向的滾動條。

:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view's position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:decrement -遞減偽類應(yīng)用于按鈕和軌道片段。它指示按鈕或軌跡片段在使用時是否將遞減視圖的位置（例如，在垂直滾動條上向上，在水平滾動條上向左）。

:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view's position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
:increment -遞增偽類應(yīng)用于按鈕和軌跡片段。它指示按鈕或軌跡片段在使用時是否會增加視圖的位置（例如，在垂直滾動條上向下，在水平滾動條上向右）。

:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:start -start偽類應(yīng)用于按鈕和軌跡片段。它指示對象是否放置在拇指之前。

:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
:end -end偽類應(yīng)用于按鈕和軌跡片段。它指示對象是否放置在拇指之后。

:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
:double-button -double-button偽類應(yīng)用于按鈕和軌跡片段。它用于檢測一個按鈕是否是位于滾動條同一端的一對按鈕的一部分。對于軌道件，它指示軌道件是否鄰接一對按鈕。

:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
:single-button -單按鈕偽類應(yīng)用于按鈕和軌跡片段。它用于檢測按鈕是否單獨位于滾動條的末尾。對于軌跡片段，它指示軌跡片段是否鄰接單個按鈕。

:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
:no-button -指向軌道段并指示軌道段是否運行到滾動條的邊緣，即，軌道的那一端沒有按鈕。

:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
:corner-present -指向所有滾動條片段，并指示是否存在滾動條角。

:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)
:window-inactive -指向所有滾動條，并指示包含滾動條的窗口當前是否處于活動狀態(tài)。(In最近的nightlies，這個偽類現(xiàn)在也適用于：：selection。我們計劃將其擴展到任何內(nèi)容，并將其作為一個新的標準偽類。

In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.
此外，：enabled、：disabled、：hover和：active偽類也可以處理滾動條。

The display property can be set to none in order to hide specific pieces.
可以將display屬性設(shè)置為none以隱藏特定的片段。

Margins are supported along the axis of the scrollbar. They can be negative (so that the track can for example be inflated to cover the buttons partially).
沿滾動條的軸沿著支持邊距。它們可以是負的（使得軌道可以例如被充氣以部分地覆蓋按鈕）。

The linked example above provides a very complex scrollbar that has all of the OS X scrollbar behaviors (double buttons, an inactive look, track overlapping the buttons, etc.) as well as many of the Windows Vista scrollbar behaviors (hover effects, unique pressed looks above and below the track, etc.).
上面的鏈接示例提供了一個非常復雜的滾動條，它具有OS X滾動條的所有行為（雙按鈕、非活動外觀、軌道與按鈕重疊等）。以及許多Windows Vista滾動條行為（懸停效果，軌道上方和下方獨特的按壓外觀等）。

html{
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2);
  }

html{
 /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

html{
  /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

/* 滾動條軌道樣式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 縱向滾動條樣式 */
*::-webkit-scrollbar-vertical {
  width: 10px;
}
/* 橫向滾動條樣式 */
*::-webkit-scrollbar-horizontal {
  height: 10px;
}
/* 縱向滾動條軌道樣式 */
*::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 縱向滾動條滑塊樣式 */
*::-webkit-scrollbar-thumb {
  background: #888;
}

不同的瀏覽器內(nèi)核需要使用不同的CSS前綴來實現(xiàn)特定的樣式，以確保在不同的瀏覽器中都能正確顯示。以下是一些常見的瀏覽器內(nèi)核和它們對應(yīng)的CSS前綴：


WebKit（Chrome、Safari等）：

-webkit-

Gecko（Firefox）：

-moz-



Trident（Internet Explorer）：

-ms-



Blink（Chrome等）：

-webkit- （部分屬性也可使用WebKit前綴）


Presto（Opera 舊版本）：

-o-

html {

  //webkit內(nèi)核
  /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }


  //Firefox

  /*滾動條寬高 */
  ::-moz-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-moz-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-moz-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-moz-scrollbar-thumb:active {
    background-color: #666666;
  }

  //ie Internet Explorer
  /*滾動條寬高 */
  ::-ms-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-ms-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-ms-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-ms-scrollbar-thumb:active {
    background-color: #666666;
  }

  //Opera 舊版本
  /*滾動條寬高 */
  ::-o-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-o-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-o-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-o-scrollbar-thumb:active {
    background-color: #666666;
  }
}