CSS3：scrollbar樣式設定

1. 設定出現滾動條的方式

overflow:scroll --- x和y方向都會出現滾動條
或者
overflow-x:scroll --- 只有x方向出現滾動條
或者
overflow-y:scroll --- 只有y方向出現滾動條

當塊級內容區域超出塊級元素範圍的時候，就會以滾動條的形式展示，你可以滾動裡面的內容，裡面的內容不會超出塊級區域範圍。有時候我們需要自定義滾動條的樣式，比如一開始就讓它顯示，改變滾動條的顏色，設定軌道的樣式等。

2.認識滾動條

::-webkit-scrollbar --- 滾動條整體部分
::-webkit-scrollbar-button --- 滾動條兩端的按鈕
::-webkit-scrollbar-track --- 外層軌道
::-webkit-scrollbar-track-piece --- 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-thumb --- 滾動條裡面可以拖動的那個
::-webkit-scrollbar-corner --- 邊角
::-webkit-resizer --- 定義右下角拖動塊的樣式

3.改變滾動條樣式

使用方式：

::-webkit-scrollbar {
  /*滾動條整體樣式*/
  width : 8px;  /*對應豎滾動條的寬度*/
  height : 8px;  /*對應橫滾動條的高度*/
}
::-webkit-scrollbar-thumb {
  /*滾動條裡面小方塊*/
  /* border-radius: 6px; */
  background-color: #9e9e9e;
}
::-webkit-scrollbar-track {
  /*滾動條裡面軌道*/
  background: #ffffff;
  /* border-radius: 6px; */
}
 

4.滾動條偽類

任何物件都可以設定：邊框、陰影、背景圖片等等，建立的滾動條任然會按照作業系統本身的設定來完成其互動的行為。下面的偽類可以應用到上面的偽元素中。

:vertical --- 適用於任何垂直方向的滾動條。
:no-button --- 表示軌道結束的位置沒有按鈕。
:horizontal --- 適用於任何水平方向上的滾動條。
:corner-present --- 表示滾動條的角落是否存在。
:decrement --- 適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片。
:increment --- 適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片。
:end --- 適用於按鈕和軌道碎片。表示物件（按鈕軌道碎片）是否放在滑塊的後面。
:double-button --- 適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。
:single-button --- 適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。
:start --- 適用於按鈕和軌道碎片。表示物件（按鈕軌道碎片）是否放在滑塊的前面。
:window-inactive --- 適用於所有滾動條，表示包含滾動條的區域，焦點不在該視窗的時候。

5.參考文章

css scrollbar樣式設定：https://segmentfault.com/a/1190000012800450