css 改變滾動條樣式

/*改變滾動條*/ #scroll { scrollbar-arrow-color: #f4ae21; /**/ /*三角箭頭的顏色*/ scrollbar-face-color: #333; /**/ /*立體滾動條的顏色*/ scrollbar-3dlight-color: #666; /**/ /*立體滾動條亮邊的顏色*/ scrollbar-highlight-color: #666; /**/ /*滾動條空白部分的顏色*/ scrollbar-shadow-color: #999; /**/ /*立體滾動條陰影的顏色*/ scrollbar-darkshadow-color: #666; /**/ /*立體滾動條強陰影的顏色*/ scrollbar-track-color: #666; /**/ /*立體滾動條背景顏色*/ scrollbar-base-color: #f8f8f8; /**/ /*滾動條的基本顏色*/ overflow: auto; margin-bottom: 20px; } #scroll::-webkit-scrollbar { /*滾動條整體部分，其中的屬性有width,height,background,border等（就和一個塊級元素一樣）（位置1）*/ width: 10px; height: 10px; } #scroll::-webkit-scrollbar-button { /*滾動條兩端的按鈕，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置2）*/ background: #ffffff; } #scroll::-webkit-scrollbar-track { /*外層軌道，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置3）*/ background: #ffffff; } #scroll::-webkit-scrollbar-track-piece { /*內層軌道，滾動條中間部分（位置4）*/ background: #ffffff; } #scroll::-webkit-scrollbar-thumb { /*滾動條裏面可以拖動的那部分（位置5）*/ background: rgba(123, 123, 123, 0.6); border-radius: 4px; } #scroll::-webkit-scrollbar-corner { /*邊角（位置6）*/ background: #ffffff; } #scroll::-webkit-scrollbar-resizer { /*定義右下角拖動塊的樣式（位置7）*/ background: #ffffff; }