共計 920 個字符，預計需要花費 3 分鐘才能閱讀完成。

在瀏覽網頁的時候，我們可以看到網頁右邊會有一個滾動條，這個默認的滾動條是灰色的長條，不少站長為追求個性，通常會修改這個滾動條樣式。下面橘子君為大家分享的便是 CSS 滾動條設置方法，因為是通過 CSS 來修改樣式，所以此方法可以通用到其他網站。

首先了解一下滾動條常用屬性

::-webkit-scrollbar：滾動條整體部分，可自定義滾動條的大小等。

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

::-webkit-scrollbar-track-piece：內層軌道，可增加滾動框背景樣式。

::-webkit-scrollbar-thumb：滾動條里面可以鼠標點擊拖動的那部分。

下面我們來看下 CSS 滾動條設置的方法，方法很簡單，站長只需在網站的 CSS 文件中添加以下代碼，通常是 style.css 文件。

/*--- 滾動條默認顯示樣式 --*/  
::-webkit-scrollbar-thumb{  
   background-color:#018EE8;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}
/*--- 鼠標點擊滾動條顯示樣式 --*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#FB4446;  
   height:50px;  
   -webkit-border-radius:4px;  
}
/*--- 滾動條大小 --*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}
/*--- 滾動框背景樣式 --*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

在以上 CSS 滾動條設置樣式前，站長可以先做好備份。添加上面的代碼后我們會發現滾動條變細，鼠標放上去拖動是紅色，平時滾動條的顏色是藍色的，站長可將顏色 #018EE8 替換，建議用配色圖挑選合適的顏色，喜歡的朋友可以動手試試。