一個完整滾動條右以下部分組成：

1. 
   ::-webkit-scrollbar 滾動條整體部分，常用屬性：width,height,background,border；
   ::-webkit-scrollbar-button 滾動條兩邊的按鈕，默認不設置時不顯示，可設置高度、背景色、背景圖片；
   ::-webkit-scrollbar-track 整個滾動條去除兩邊按鈕剩下的部分；
   ::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分；
   ::-webkit-scrollbar-thumb 滾動條裏面可以拖動的那部分；
   ::-webkit-scrollbar-corner 邊角；
   ::
    
   -webkit-resizer 定義右下角拖動塊的樣式

   2.借用一張網上挺不錯的圖片說明：

   

   
   
   <style>
   /* 設置整個滾動條的一些屬性，寬度針對垂直滾動條，高度針對水平滾動條 */
   ::-webkit-scrollbar {
   	width: 10px;
   	height: 10px;
   }
   /* 整個滾動條去除button剩下的部分 */
   ::-webkit-scrollbar-track {
   	border-radius: 10px;
   	background-color: #d8dce5
   }
   /* 滾動條可拖拽的部分 */
   ::-webkit-scrollbar-thumb {
   	border-radius: 5px;
   	background-color: #adadad;
   }
   ::-webkit-scrollbar-thumb:hover {
   	background-color: #929292;
   }
   ::-webkit-scrollbar-thumb:active {
   	background-color: #666363;
   }
   ::-webkit-scrollbar-corner {
   	background-color: #535353
   }
   ::-webkit-scrollbar-resizer {
   	background-color: #ff6e00
   }
   .sample {
   	width: 600px;
   	height: 400px;
   	overflow: auto;
   }
   .sample-wrapper {
   	width: 1200px;
   	height: 1000px;
   	background: -webkit-linear-gradient(red, blue);
   	background: linear-gradient(red, blue);
   	color: white;
   }
   </style>
   <div class="sample">
   	<div class="sample-wrapper">
   		<p>測試滾動示例1</p>
   		<p>測試滾動示例2</p>
   		<p>測試滾動示例3</p>
   		<p>測試滾動示例4</p>
   		<p>測試滾動示例5</p>
   		<p>測試滾動示例6</p>
   		<p>測試滾動示例7</p>
   		<p>測試滾動示例8</p>
   	</div>
   </div>
    
   

CSS3自定義瀏覽器滾動條樣式