vue + iview 設置滾動條樣式

1.未修飾滾動條效果如下

2.修飾之後

3.實現代碼

::-webkit-scrollbar {
  width: 6px;
  background-color: #d8d8d8;
}

/* 滾動槽 */
::-webkit-scrollbar-track {
  border-radius:10px;
}

::-webkit-scrollbar-thumb {
  background-color: #bfc1c4;
}

4.補充說明

::-webkit-scrollbar ：滾動條整體部分，其中的屬性: width,height,background,border等。

::-webkit-scrollbar-button ：滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track ：外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track-piece ：內層軌道，具體區別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。

::-webkit-scrollbar-thumb ：滾動條裏面可以拖動的那部分

::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處

::-webkit-resizer ：兩個滾動條交匯處用於拖動調整元素大小的小控件（基本用不上）